爲什麼絕對定位元素顯示在靜態元素上？

我知道絕對定位打破正常流程，但由於HTML中的順序是絕對的元素第一個然後是靜態的，我期待它也反映在顯示順序中。爲什麼絕對定位元素顯示在靜態元素上？

.absolute 
 
{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 

 
.static 
 
{ 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 400px; 
 
}

<div> 
 
    <div class="absolute"></div> 
 
    <div class="static"></div> 
 
</div>

的原因，我需要的，這是因爲我希望顯示的從下到上滑動並出現像它從後面來了一個滑動菜單（「.absolute」 div） '.static'div。容器div顯然需要「溢出：可見」。

任何想法如何做到這一點？

也許還需要其他技術？像CSS clip？

來源

2017-02-16 Don Box

上述兩個答案都給出了您所面臨情況的充分解釋。鑑於手頭的問題，您可以使用此解決方案。只需將position:relative添加到靜態div即可。

.absolute 
 
{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 

 
.static 
 
{ 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 400px; 
 
    position: relative; 
 
}

<div> 
 
    <div class="absolute"></div> 
 
    <div class="static"></div> 
 
</div>

來源

2017-02-16 12:07:01

實際上不需要添加z-index，只需改變相對位置，以便Z-index給出的順序:) –

@DonBox是的，我剛剛注意到了。我相應地修改了答案。 –

絕對位置意味着您可以將此div放在任何位置，並且不會影響或受到流中任何其他元素的影響。

絕對定位元素完全從正常流程中移除。

要獲得您想要的效果，您可以使用z-index和position: relative和position: absolute。

來源

2017-02-16 11:53:53 Plenarto

作爲每CSS 2.2的部分9.9.1 Specifying the stack level: the 'z-index' property：

在每個堆疊上下文中，下列各層塗在後端到前順序：

背景和邊界構成堆疊上下文的元素。

孩子堆疊負面堆棧級別的情況下（最負面的第一）。

非流水線，非流水線，非定位後裔。

非定位花車。

流入內聯級別的未定位後代，包括內聯表和內聯塊。

子級堆棧上下文中堆棧級別0和定位後級堆棧級別0。

孩子堆疊積極的堆棧級別（最不積極的優先）的上下文。

三一個在列表中是position:static和6 th爲position:absolute。我爲你標記了它們。

編輯，根據你的問題編輯：

爲了解決您的問題（這是什麼，你應該問在首位，恕我直言），你需要

將position:relative;應用於您的.static div，使其與position:absolute之一相同。（現在這兩個都是職位編）。

如果你想要的頂端不是DOM中的最後一個，你還需要給它一個積極的z-index，比它的兄弟姐妹'大。通常情況下，它們會被送回，回到頂端。

來源

2017-02-16 11:58:16

但我並沒有指定任何的z-index :) –

，你認爲不指定它使不復存在或申請？所有元素都有默認的'z-index'。沒有它，瀏覽器將不知道在哪裏繪製它們。以上規則是爲您的用例指定順序的規則。我無法幫助你。你問爲什麼，我將正在應用的規則聯繫起來，就像目前在規範中制定的那樣。 –

謝謝，有道理:) –

爲什麼絕對定位元素顯示在靜態元素上？

回答

相關問題