Question

我想知道是否有人能告诉我为什么我的z-index属性不能正常工作。

两侧的横幅（黑色）的z-index为：

     z-index: -1;

和黄色的横幅：

     z-index: 1000;

这是一个类似于我正在使用的小提琴，两个黑色方块的z-index低于黄色横幅，所以为什么它们显示在顶部？

两个灰色三角形看起来工作正常，我正在尝试创建横幅效果。

我已经尝试过改变这些值，但我似乎无法让它正常工作，而且我看过它应该工作的所有其他地方，所有元素都有一个'位置'属性，所以我看不出问题。

任何？

Answer 1

<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

Answer 2

z-index 始终使用并行元素，而不是您的孩子 div 中的 z-index 的代码，这就是为什么工作不正常。

查看代码实际上是如何工作的： -

<强> 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-根据您的要求索引

demo answer of your question

z-index工作不正常

2 个答案: