CSS Z-index不適用於相對位置

Question

我沒有讓z-index工作的運氣。 雖然這一切看起來都很簡單。 我只需要顯示一些內容即可覆蓋其他內容。 這是為了創建一個簡單的下拉控件，以便臨時顯示下拉菜單，而不會移動下一個內容，然后再備份。

這是我的簡化代碼和獨立代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Z-Axis</title>
    <style>
        #main_div {
            position: relative;
            z-index: 0;
            top: 0px;
            left: 0px;
        }
        .dropdown {
            position: relative;
            z-index: 1;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="main_div">
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <ul class="dropdown">
            <li>5</li>
            <li>10</li>
            <li>20</li>
        </ul>
        <p>line 2 of text</p>
        <p>line 3 of text</p>
        <p>line 4 of text</p>
        <p>line 5 of text</p>
        <p>line 6 of text</p>
    </div>
</body>
</html>

如您所見，我負責在main-div中創建父stacking context ，但這沒有幫助。 當我在Firefox或Chrome中運行以上命令時，將顯示下拉列表，並且第2-6行會在頁面上向下推送，而不是隱藏在下拉列表后面。

position必須是相對的，因為這些東西將是一個React組件，並位於較大頁面中的某個位置。 下拉列表應在Line1的正下方，第2-6行應隱藏在較低的z-index平面上。

Answer 1

您弄錯的是position: relative而不是position: absolute 。 我更改了它，現在可以了。 position: relative使之僅，相對，使其相對，而不考慮其他DOM元素或其他DOM元素。

我添加了background: red因此效果更好。

您的z-index工作正常，但仍會尊重其他DOM元素。

根據MDN ：

relative ： 元素是根據文檔的正常流程放置的，然后根據top，right，bottom和left的值相對於自身偏移。 偏移量不影響任何其他元素的位置； 因此，頁面布局中為元素提供的空間與位置是靜態的相同。 當z-index的值不是auto時，此值將創建新的堆疊上下文。 它對table-*-group，table-row，table-column，table-cell和table-caption元素的影響是不確定的。

absolute ： 從常規文檔流中刪除該元素，並且在頁面布局中沒有為該元素創建空間 。 它相對於其最接近的祖先（如果有）定位。 否則，它相對於初始包含塊放置。 它的最終位置由top，right，bottom和left的值確定。

關鍵部分

.dropdown {
    position: absolute;
    ...
}

片段

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Z-Axis</title> <style> #main_div { position: relative; z-index: 0; top: 0px; left: 0px; } .list-wrapper { position: relative; } .dropdown { position: absolute; top: 0; left: 0; z-index: 1; background: red; } </style> </head> <body> <div id="main_div"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. <div class="list-wrapper"> <p>line 1 of text</p> <ul class="dropdown"> <li>5</li> <li>10</li> <li>20</li> </ul> <p>line 2 of text</p> <p>line 3 of text</p> <p>line 4 of text</p> <p>line 5 of text</p> <p>line 6 of text</p> </div> </div> </body> </html>

CSS Z-index不適用於相對位置

問題描述

1 個解決方案

解決方案1
4 已采納 2018-07-03 13:25:49

關鍵部分

片段

CSS Z-index不適用於相對位置

問題描述

1 個解決方案

解決方案1 4 已采納 2018-07-03 13:25:49

關鍵部分

片段

解決方案1
4 已采納 2018-07-03 13:25:49