0

と#strangerの間にdivを配置するにはどうすればよいですか？現在、divはと！の両方をカバーしています。#mother#child#stranger#mother#child

<head> 
  <style>
  #mother{
    position:absolute;
    display:block;
    width:300px;
    height:300px;
    background-color:green;
    padding:40px;
    z-index:1000;
  }
  #child{
    position:relative;
    display:block;
    width:180px;
    height:180px;
    background-color:yellow;
    z-index:6000;
  }
  #stranger{
    position:relative;
    display:block;
    width:300px;
    height:600px;
    background-color:black;
    z-index:1500;
  }
  </style>
  </head>
  <body>
    <h1>Z-index Test</h1>
    <h1>How Do I put #stranger between #mother and #child?</h1>
    <div id='mother'>
        <div id='child'></div>
    </div>
    <div id='stranger'></div>
  </body>
  </html>
4

1 に答える 1

2

これは、＃childが#motherの中にネストされているためです。#motherが#strangerよりも低い場合、＃motherの#childも見知らぬ人よりも低くなります。スタッキングコンテキストのこの説明を参照してください。

マークアップが次のようになっていると、期待どおりの結果が得られます。

<body>
    <div id='mother'></div>
    <div id='child'></div>
    <div id='stranger'></div>
</body>

そうすると、それらはすべて同じスタッキングコンテキストになります。

于 2012-11-19T05:10:03.763 に答える