14 

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>

现在我如何将 h3 放置在覆盖层顶部的 .fixed div 内。请与 z-index 一起发布一些关于固定的阅读。

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

4

3 回答 3

10

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

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

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

然后在.fixed你的上面h3是 300 个街区。

例如，如果我们在 150 的标签div下方添加另一个，“积木塔”将低于顶部的所以。h3z-indexh3h3

然后在同一 DOM 级别上还有另一个div( )与高于. 该块将放置在 300 个块的正上方。.overlay.fixedz-index.fixedh3

例如：

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

要将 h3 设置在顶部，请将其放在覆盖层的相同 lvl 上或设置更高的.fixed z-index.

于 2013-05-03T15:29:22.063 回答
5

.fixed如果元素充当其任何子项的持有者，则不能这样做。

这意味着，例如，如果您h3将绝对位置设置为底部，它将转到其父元素的底部。

z-index以同样的方式工作。它的值将由父级继承。由于z-index默认值为0，因此您的.fixed元素的z-index值为0，并且您h3的值为first 0，然后是300。

于 2013-05-03T15:29:47.737 回答
-6

改变你的

position:fixed;

至

position:absolute;

上.fixed，然后它工作。

于 2016-11-14T17:12:09.363 回答