1

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

http://jsfiddle.net/3v7Qq/

两侧的横幅(黑色)的 z-index 为:

     z-index: -1;

和黄色的横幅:

     z-index: 1000;

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

两个灰色三角形似乎工作正常,我正在尝试创建横幅效果。

我已经尝试更改值,但我似乎无法让它工作,而且我看过的其他地方都说它应该工作,所有元素都有一个“位置”属性,所以我看不到问题。

任何人?

4

2 回答 2

1

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

现场演示

在你的回答之后:在伪类之前会很好看下面提到的演示我如何在你的问题之前和之后使用伪元素我希望这对你有用并且可以根据你的要求给出z-index

您的问题的演示答案

于 2012-10-19T11:44:00.730 回答
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>

​​​​​​​​​​​​​​​​​​​</p>

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

于 2012-10-19T09:28:30.747 回答