工作不正常

Question

的z-index我想知道是否有人能告訴我爲什麼我的Z-index屬性是不工作，因爲它應該。

http://jsfiddle.net/3v7Qq/

在雙方（黑色）的橫幅有一個的z-index：

 z-index: -1; 

和旗幟是黃色：

 z-index: 1000; 

這裏是一個小提琴其中與我正在使用的類似，兩個黑色方塊的Z指數低於黃色橫幅，爲什麼它們顯示在頂部？

兩個灰色三角形顯示一切正常，我想創建一個旗幟的作用。

我試圖改變的值，但我似乎無法得到它的工作和其他地方我已經看了說，它應該工作，所有元素都有一個「位置」屬性，所以我看不到的問題。

有人嗎？

Answer 1

的z-index作品總是並行元素不像您的代碼z-index在您的孩子div的這就是爲什麼它不能正常工作。

看到它實際上是如何工作的代碼： -

HTML

<div class="div1"></div> 
<div class="div2"></div> 

CSS

.div1 { 
width:200px; 
    height:100px; 
    background:red; 
    position:relative; 
    z-index:100; 
} 

.div2 { 
width:100px; 
height:250px; 
background:green; 
position:absolute; 
top:0px; 
z-index:-10; 
} 

live demo

而在你的回答案例之後：在僞類將罰款之前，請看下面提到的演示我如何在你的問題的僞元素之前和之後使用，我希望這會對你有用，並且可以根據你的要求給出z-index

demo answer of your question

Answer 2

<div class="main"> 
    <span class="rightbanner"></span> 
    <span class="leftbanner"></span>    
<nav> 
    <div id="logo"> 
    </div> 
    <span class="leftarrow"></span> 
    <span class="rightarrow"></span> 

    <ul id="nav_l"> 
     <li><a href="index.html" id="index">Home</a></li> 
     <li><a href="search.html" id="search">Search</a></li> 
    </ul> 
    <ul id="nav_r"> 
     <li><a href="blog.html" id="blog">Blog</a></li> 
     <li><a href="#footer_box_c" id="contact">Contact</a></li>  
    </ul> 
</nav> 

CSS：

.leftbanner { 
    height: 40px; 
    width: 30px; 
    position: relative; 
    bottom: 30%; 
    left: -20px; 
    background-color: black; 
    z-index: -1; 
    -moz-box-shadow: 0px 2px 10px 2px #808080; 
    -o-box-shadow: 0px 2px 10px 2px #808080; 
    -webkit-box-shadow: 0px 2px 10px 2px #808080; 
    box-shadow: 0px 2px 10px 2px #808080; 
} 

.rightbanner { 
    height: 40px; 
    width: 30px; 
    position: relative; 
    bottom: 30%; 
    right: -20px; 
    background-color: black; 
    z-index: -1; 
    -moz-box-shadow: 0px 2px 10px 2px #808080; 
    -o-box-shadow: 0px 2px 10px 2px #808080; 
    -webkit-box-shadow: 0px 2px 10px 2px #808080; 
    box-shadow: 0px 2px 10px 2px #808080; 
} 

.main{ 
    height:100px; 
}​ 

jsFiddle