CSS3 变换比例覆盖了悬停时的另一个元素

Question

我有一个博客元素，它有 2 个子元素：.blog-header（包含背景图像）和 .blog-body。当将鼠标悬停在 .blog-header 上时，我希望图像能够完美缩放。但问题是：图像占据了 .blog-body 应该放置的空间

这是我的代码：

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
}

<article class="blog">
  <header class="blog-header">
    <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
  </header>
  <div class="blog-body">
    <time class="blog-date">24 Jan</time>
    <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>
  </div>
</article>

查看问题的外部链接http://jsfiddle.net/a49evb1q/

有什么办法可以解决这个问题吗？

Answer 1

你的z-indexon.blog-body不会有任何效果，因为你没有给它一个位置。

.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
  position: relative; <!-- ADD THIS
}

例子...

.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
  position: relative; <!-- ADD THIS
}

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
  position:relative;
}

编辑

z-index实际上，您可以从代码中完全删除这些值。Aposition: relative会自己解决问题

更新的示例...

<article class="blog">
  <header class="blog-header">
      <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
  </header>
  <div class="blog-body">
    <time class="blog-date">24 Jan</time>
    <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>
  </div>
</article>

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  position:relative;
}