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组件，并位于较大页面的某个位置。下拉列表应位于第1行下方，第2-6行应隐藏在较低的z-index平面上。

Answer 1

您弄错的是position: relative而不是position: absolute。我更改了它，现在可以了。 position: relative仅使它相对，而不使它无论其他DOM元素都呈现。

我添加了background: red，因此效果更明显。

您的z-index可以正常工作，但是该元素仍然尊重其他DOM元素。

根据MDN：

相对：   根据文档的正常流程放置元素，然后根据top，right，bottom和left的值相对于自身偏移。偏移量不影响任何其他元素的位置；因此，页面布局中为元素提供的空间与位置是静态的相同。   当z-index的值不是auto时，此值将创建新的堆叠上下文。它对table-*-group，table-row，table-column，table-cell和table-caption元素的影响是不确定的。

绝对：   该元素已从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于其最接近的祖先（如果有）定位。否则，它相对于初始包含块放置。它的最终位置取决于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 个答案:

关键部分

摘要