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> 
只有这个东西应该放在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：

 code> .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放在overlay的顶部。

解决方案

您在固定 div 内的元素上设置 z-index $ c>谁在覆盖。

换句话说，覆盖隐藏 z-index / p>

你看，就像lego块。 .fixed 在底部与他的z-index 0。

然后在。固定是您的 h3 是一个超过另一个300块。

我们在 h3 标签下面加上 z-index 标签中的 div c $ c> 150，塔楼将低于 h3 ，因此 h3

然后有另一个 div （ .overlay ）比更高的 z-index 在 .fixed > .fixed 。他的街区将位于300块 h3

成像我说：

 < ============================ > <  -  theoverlay（z-index 1）
< => 
< => 
< => 
< => 
< => < => <  -  .fixed（random z-index）中的元素
< => < => 
< => < => 
< => < => 
< => < => 
< ============================> <  -  .fixed（z-index 0）
  

在您的叠加层的相同lvl上或设置更高的 .fixed z-index 。

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

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/ Check the above jsfiddle, So how do i bring the h3 on top of overlay..

解决方案

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

in other word, overlay hided z-index value is 301.

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

Then on .fixed there is your h3 wich is 300 block one over an other.

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

Then there is an other div(.overlay) on the same DOM level than .fixed with a higher z-indexthan .fixed. His block would placed right over the 300 blocks of h3

imaging what i say :

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

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

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