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

回答

相關問題