z-index和position固定如何在css中协同工作

Question

HTML

<div class="overlay">

</div>
<div class="fixed">
    <center>

        <h3>
            Only this thing should be brought on top of overlay.. 
        </h3>
    </center>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>

CSS:

.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;
}

现在我如何将h3放在叠加顶部的.fixed div内.请将一些读数与z-index一起发布.

http://jsfiddle.net/CvMLw/4/ 检查上面的jsfiddle,那么如何将h3置于叠加层之上..

Answer 1

您在叠加层下的z-index固定内部设置了一个元素div.

换句话说,隐藏z-index值的叠加是301.

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

然后在.fixed你h3的300块之上.

如果再加上,例如,另一个div下面h3有标签z-index的150,"块塔"将是低于h3因此h3会在顶部.

然后还有另外一个div(.overlay)在同一水平DOM作为.fixed具有较高z-index比.fixed.这个区块将位于300块区域之上h3.

例如:

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

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

Answer 2

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

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

z-index以同样的方式工作.它的值将由父级继承.由于z-index默认值是0,你的.fixed元素具有z-index的价值0,和你h3有第一次 0,然后300.