Z-Index堆叠？

我想在CSS中使用z-index在背景中使用这个灰色条在背景下的紫色div（然后当点击一个按钮时用JavaScript拉出...但是工作正常！）。Z-Index堆叠？

这是它看起来像现在：

image of it now

该地区的HTML看起来像这样：

<div id="body"> 
     <div id="container"> 

      <header> 
       ... header content ... 
      </header> 


      <div id="pullBar"> 
       ... pullBar content ... 
      </div> 
     </div> 
</div>

这是什么CSS的#pullbar和#body外观如：

#pullBar{ 
    padding:7px 15px; 
    height:108px; 
    width:90%; 
    background:#BCC6CC; 
    margin-left:-90%; 
    position: relative; 
    z-index: 1; 
} 

#body { 
    width: 100%; 
    margin: 0; 
    background:#401445; 
    position: relative; 
    z-index: 5; 
}

谢谢！

来源

2013-12-11 Rachelle Bennington

由于相关元素（也嵌套），z-index是嵌套的。所以，你既可以在pullbar移动到同一水平#body：

<div id="body"> 
     <div id="container"> 

      <header> 
       ... header content ... 
      </header> 
     </div> 
</div> 

<div id="pullBar"> 
    ... pullBar content ... 
</div>

或者你可以使用在pullbar绝对定位放置在一个“新”层，所以Z-指数将在与#body同等级别。

看看这里还有：z-index on absolutely positioned nested elements

来源

2013-12-11 00:29:15 Neograph734

TGE的原因，就是pullbar DIV继承了相同的z-index为body.Make的pullbar同一级别的身体......

<body> 
    </body> 

    <div id="pullbar"> 
    </div>

这段代码没问题。但不建议将pullbar div设置为与主体相同的级别。使用另一个div like.some主体div代替body，然后使主体div的水平拉杆div

来源

2013-12-11 00:38:14 h2O

回答

相关问题