时间戳

首页 > 解决方案 > 你如何将一个 div 放在另一个 div 之上？

html - 你如何将一个 div 放在另一个 div 之上？

问题描述

.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-index，但没有奏效。我们还尝试添加不透明度来更改堆叠上下文，但这也不起作用。

标签： htmlcsscss-position

解决方案

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

我刚刚禁用了您的几行 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/

推荐阅读