1

なぜ私のz-indexプロパティが正常に機能しないのか誰かに教えてもらえないかと思っていました。

http://jsfiddle.net/3v7Qq/

側面のバナー（黒）のz-indexは次のとおりです。

     z-index: -1;

黄色のバナー：

     z-index: 1000;

これは私が作業しているものに似たフィドルです。2つの黒い正方形のz-indexは黄色のバナーよりも低いのに、なぜそれらが上に表示されているのでしょうか。

2つの灰色の三角形が正しく機能しているように見えます。バナー効果を作成しようとしています。

値を変更しようとしましたが、機能しないようです。他のすべての場所で機能するはずだと表示されています。すべての要素に「position」属性があるため、問題はわかりません。

誰？

4

2 に答える 2

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 に答える
1

z- indexは、子divでz-indexを指定したコードとは異なり、常に並列要素で機能します。そのため、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 に答える