我没有运气让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>
正如您所看到的,我在主-div中创建了一个父stacking context
,但是这没有帮助。当我在Firefox或Chrome中运行上面的代码时,会显示下拉列表,并将第2-6行按下页面,而不是隐藏在下拉列表后面。
position
必须是相对的,因为这些东西将是一个反应组件,并且定位在一个更大的页面的某个位置。下拉列表应该就在Line1下面,第2-6行应该隐藏在较低的z-索引平面上。
发布于 2018-07-03 13:25:49
你搞错的是position: relative
而不是position: absolute
。我改变了它,现在它起作用了。position: relative
只使得它是相对的,而不是呈现任何DOM元素或其他DOM元素。
我添加了background: red
,因此效果更直观。
您的z-index
工作得很好,但是元素仍然呈现为尊重其他DOM元素。
根据MDN
关键部分
.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>
https://stackoverflow.com/questions/51155746
复制相似问题