1

現在、z-index を使用して特定の順序でいくつかの DIV を配置しようとしていますが、jsfiddle で設定して、何か問題があるかどうかを確認してください。

後ろから順に並べるとこんな感じ。

赤 緑 青 黄

http://jsfiddle.net/BUWaZ/4/

HTML

<div id="green">

   <div id="yellow">
   </div>

   <div id="red">
   </div>

</div>

<div id="blue">
</div>

CSS

#green{
   background-color:green;
   height:100px;
   width:100%;
   position:fixed;
   top:0;
}

#red {
   margin:-85px auto 0;
   width:406px;
   height:60px;
   background-color:red;
z-index:-99999;   
}

#blue{
   margin:350px auto 0;
   width:60px;
   height:465px;
   z-index:99999;
   background-color:blue;
}

#yellow {
   margin:0px auto 0;
   width:170px;
   height:170px;
   background-color:yellow;
   z-index:99999;   
}
4

2 に答える 2

3

z-index が機能するには、位置を設定する必要があります。それを持っていないものに相対的な位置を追加します。また、青と黄色の z-index が同じでないと、どちらを選択すればよいかわかりません。

http://jsfiddle.net/SzxT2/1/

#green{
    background-color:green;
    height:100px;
    width:100%;
    position:fixed;
    top:0;
}

#red {
    margin:-85px auto 0;
    width:406px;
    height:60px;
    background-color:red;
z-index:-99999;    
    position:relative;
}

#blue{
    margin:350px auto 0;
    width:60px;
    height:465px;
    z-index:99998;
    background-color:blue;
    position:relative;
}

#yellow {
    margin:0px auto 0;
    width:170px;
    height:170px;
    background-color:yellow;
    z-index:99999;   
    position:relative;
}
于 2012-12-04T21:57:29.067 に答える
0

z-index された要素の位置を定義する必要があることに加えて、子要素の z-index を定義して、子要素を親の後ろに配置することはできません。(も参照)

以下がうまくいくかどうかを確認してください: jsfiddle.net/BUWaZ/7/

HTML

<div id="green">
</div>

<div id="yellow_placer">
    <div id="yellow">
    </div>
</div>

<div id="red_placer">
    <div id="red">
    </div>
</div>

<div id="blue">
</div>​

CSS

#red {
   margin:0 auto 0;
   width:406px;
   height:60px;
   background-color:red;
   position:relative;
   z-index:100;   
}
#red_placer {
   width:100%;
   position:fixed;
   top:85px;
   z-index:100; 
}

#green{
   background-color:green;
   height:100px;
   width:100%;
   top:0;
   position:fixed;
   z-index:200; 
}

#blue{
   margin:30px auto 0;
   width:60px;
   height:465px;
   background-color:blue;
   position:relative;
   z-index:300;
}

#yellow {
   margin:0px auto 0;
   width:170px;
   height:170px;
   background-color:yellow;
   position:relative;
   z-index:400;   
}
#yellow_placer {
   width:100%;
   position:fixed;
   top:0;
   z-index:400; 
}​
于 2012-12-04T22:29:02.497 に答える