我想知道如果我想要做的，甚至有可能，因爲我無法得到它的工作：CSS的z-index（堆疊上下文）

<body> 
    <header> 
     <panel> 
      <login> 
      </login> 
     </panel> 
    </header> 

    <content> 
    </content> 
</body>

這是我想要的層次結構：

<panel>上述<header>
<login>下既<header>和<panel>
<login>上述<content>

附加信息：

<login>是從<header>下方滑落的需求，但應保持網頁上面的<content>

一個 position: absolute登錄表單

希望你能幫助我..

來源

2012-01-12 tamir

你有什麼試過？在這一點上，理想情況下，你至少應該有一個基礎風格的工作。 – BoltClock 2012-01-12 16:35:05

如果登錄不一定是頭部和麪板的孩子，則可能是這樣。有關堆疊順序的詳細說明，請參見[https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context]（https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context） – j08691 2012-01-12 17:57:43

遺憾的是，子節點不能比他們的祖先低z-index。爲了達到你想要的效果，你需要將login移動到header之外。

例

<header> 
<div class="panel"><!-- Panel Here --></div> 
</header> 
<div class="login"><!-- Log In Here --></div> 
<div class="content"><!-- Content Here --></div>

注：我已經改變了您的標記略有符合HTML標準。如果您希望繼續使用無效標記，只需將<div class="XXX">替換爲<XXX>，並將</div>替換爲<XXX>，其中XXX是class屬性的值。

來源

2012-01-12 16:36:09 0b10011

無效標記只是爲了讓這個例子更清晰:) – tamir 2012-01-13 14:25:39

@tamir，認爲可能是這樣，但你永遠不知道：P很高興我能幫上忙！ – 0b10011 2012-01-13 14:35:07

CSS的z-index（堆疊上下文）

回答

例

相關問題