html - z-index 和 position fixed 如何在 css 中协同工作

Question

body {
  height: 3000px;
}

.fixed {
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: #f4f4f4;
}

.fixed h3 {
  position: relative;
  z-index: 300;
  color: #fff;
}

.overlay {
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  position: fixed;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

<div class="overlay"></div>
<div class="fixed">
  <center>
    <h3>
      Only this thing should be brought on top of overlay..
    </h3>
  </center>
</div>

现在如何将 get h3 放置在覆盖层顶部的 .fixed div 中。请在 fixed 和 z-index 上发布一些阅读 Material 。

http://jsfiddle.net/CvMLw/4/ 检查上面的 jsfiddle，那么我如何将 h3 放在叠加层之上..

Answer 1

您在覆盖层下的固定 div 内的元素上设置 z-index。

换句话说，隐藏z-index值的叠加层是301。

你看，这就像乐高积木。 .fixed 位于底部，其 z-index 为 0。

然后在 .fixed 上你的 h3 是一个接一个的 300 block 。

例如，如果我们在 h3 标签下添加另一个 div，z-index 为 150，即“ block 塔”将低于 h3，因此 h3 将位于顶部。

然后还有另一个 div(.overlay) 在与 .fixed 相同的 DOM 级别上，具有更高的 z-index 比 .fixed。该 block 将放置在 h3 的 300 个 block 之上。

例如:

<==============================>   <- the .overlay (z-index 1)
            <=>
            <=>
            <=>
            <=>
  <=>       <=>                <- Elements inside .fixed (random z-index)
  <=>       <=>
  <=>       <=>
  <=>       <=>
  <=>       <=>
<==============================>    <- the .fixed (z-index 0)

要将 h3 设置在顶部，请将其放在与叠加层相同的 lvl 或设置更高的 .fixed z-index。