我没有让 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 平面上。
最佳答案
你弄错的是 position: relative 而不是 position: absolute。我改变了它，现在它可以工作了。 position: relative 使其仅相对于其他 DOM 元素不呈现。
我添加了 background: red 所以效果更明显。
您的 z-index 工作得很好，但元素仍然根据其他 DOM 元素呈现。
根据 MDN :
- relative: The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
- absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and 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 不适用于相对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51155746/