如何将一个div置于另一个div之上?

Question

.main-page {
width: 90%;
height: 100%;
z-index: 999;
position: relative;
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
position: absolute;
float: right;
top: -50px;
left: 105px;
border-radius: 8px;
z-index: 9999;
}
{{start component}}
<div class="menu"> </div>
{{end component}}
<div class="main-page">
</div>

我们想在主页面顶部显示菜单，但滚动时它出现在主页面的后面。我们如何使用css将菜单放在主页面的顶部?我们已经尝试使用z指数，但没有工作。我们还尝试添加不透明度来改变堆叠上下文，但这也不起作用。

Answer 1

只是在顶部还是总是在滚动时固定在顶部?

我刚刚禁用了你的css和菜单的几行:

.main-page {
width: 90%;
height: 100%;
/* z-index: 999; */
/* position: relative; */
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
/* position: absolute; */
/* float: right; */
top: -50px;
left: 105px;
border-radius: 8px;
/* z-index: 9999; */
}

https://jsfiddle.net/k25cuax4/

Answer 2

这两个元素在HTML代码中是兄弟元素。然而，在典型的相对/绝对位置对中，绝对位置元素位于另一个元素的顶部，父元素为position: relative，子元素为position: absolute。

所以你应该相应地改变HTML结构(即移动.menu到.main-page)，或者你可以尝试应用负z-index到.main-page将其移动到背景。(即z-index: -1).