代码之家 › 专栏 › 技术社区 › Roland

css z-index不使用相对位置

z-index css

Roland · 技术社区 · 6 年前

我不太可能得到 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>

如你所见,我负责创造一个父母 stacking context 在主分区,但这没有帮助。当我在firefox或chrome中运行上面的程序时,会显示下拉列表,并将第2-6行向下推到页面上,而不是隐藏在下拉列表后面。

这个 position 必须是相对的,因为这些东西将是一个反应组件,并定位在一个更大的页面的某个地方。下拉列表应位于第1行的正下方,第2-6行应隐藏在较低的Z索引平面上。

1 回复 | 直到 6 年前

Andrzej ZióÅek 6 年前

你做错的是 position: relative 而不是 position: absolute 是的。我改变了它,现在它工作了。 位置:相对 使其仅是相对的,而不是呈现无关的或其他dom元素。

我补充说 background: red 所以效果更明显。

你的 z-index 工作得很好,但是元素仍然按照其他dom元素呈现。

根据 MDN 以下内容:

相对的 以下内容: 根据文档的正常流程定位元素 ,然后根据“上”、“右”、“下”和“左”的值相对于自身进行偏移。偏移量不影响任何其他元素的位置;因此,页面布局中为元素指定的空间与位置为静态时的空间相同。当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>