3

ページ表示の要素を適切に取得しようとしています。レイアウトはこんな感じ。

<div id='middle' style='position: fixed; z-index: 50;'></div>
<div id='bottom' style='position: fixed; z-index: 0;'>
<div id='top' style='position: fixed; z-index: 100;'></div>
</div>

そのため、下部の div を下部に配置し、その中にネストした div を上部に表示し、隣接する div を中央に配置したいと考えています。現在、表示されています（上から下への表示順）：中、上、下ですが、上、中、下を表示したいです。

ネストは、上部の div が親オブジェクトとして下部の div にアクセスし、中央の div が他の 2 つの div から独立するために重要です。

私はインラインCSSを使用して、この質問を限定的かつ直接的に保ち、CSSページを整理する手間を省きます

4

2 に答える 2

0

要するに、マークアップを変更しないと、やりたいことができません。"middle" と "bottom" の z-index は有効になりますが、"top" が "middle" の上に表示されることはありません。これは、"middle" と "bottom" が兄弟であるためです。子要素としての "top" は、その親の z-index を超えることはできません。

于 2013-03-01T19:10:30.480 に答える
0

これを試してください：

<div id='middle' style='position: fixed; z-index: 50;width: 100px; height: 100px; background: red; top: 100px;'></div>

    <div id='bottom' style='position: fixed; z-index: 0; width: 100px; height: 100px; background: blue; bottom: 0px;'> 
        <div id='top' style='position: fixed; z-index: 100; width: 100px; height: 100px; background: green; top: 0px;'></div> 
    </div>
于 2013-03-01T19:11:27.563 に答える