z-index和position如何在css中一起工作 [英] How does z-index and position fixed work together in css

问题描述

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一起固定的朗读。

Now how do I place get the h3 inside the .fixed div on top of overlay. Please post some reading on fixed along with z-index.

http://jsfiddle.net/CvMLw/4/
检查上面的jsfiddle，那么如何将h3放在overlay的顶部。

http://jsfiddle.net/CvMLw/4/ Check the above jsfiddle, So how do i bring the h3 on top of overlay..

推荐答案

您在固定 div 内的元素上设置 z-index

You set a z-index on an element inside a fixed div that is under the overlay.

换句话说，隐藏 z-index 值的重叠是

In other words, the overlay hiding the z-index value is 301.

你看，就像lego块。 .fixed 位于底部，其z-index为0。

You see, it's like lego blocks. .fixed is at the bottom with its z-index at 0.

如果我们添加，则例如， h3 标签下面的 z-index div c> 150，塔楼将低于 h3 ，因此 h3 将位于顶部

If we add, for example, another div below the h3 tag with z-index of 150, the "tower of blocks" would be lower than the h3 so h3 would be on the top.

然后有另一个 div （ .overlay ）与 .fixed 相同的DOM级别具有比 .fixed更高的 z-index 此块将位于 h3 的300个块上。

Then there is another div(.overlay) on the same DOM level as .fixed with a higher z-index than .fixed. This block would placed right over the 300 blocks of h3.

例如：

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

要设置顶部的h3在您的叠加层的同一个lvl上或设置更高的 .fixed z-index 。

To set the h3 on top, put it on the same lvl of your overlay or set a higher .fixed z-index.

这篇关于z-index和position如何在css中一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！