html - position absolute 从元素中删除垂直滚动

Question

我的代码如下所示:

xyz.html

<div class='home-container'>

    <div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400">

    <div class="menu-main"></div>


</div>

xyz.css

.home-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background: #fcfcfc;
}


.home-container .menu-main {
    width: 43%;
    height:3000px;
    position: absolute;
    background-color: red;
    left: 300px;
}

但不知何故，只要我在 menu-main 中插入 position:absolute，它就会失去滚动功能。那么我怎样才能同时实现滚动和绝对位置呢？

Answer 1

将样式属性 position:relative; 添加到您的 Parent Div(不在容器中)，如下所示。

<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">

此外，如果您想要水平滚动，还可以在您的 CSS 中添加 overflow-x: scroll;。就像下面...

.home-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: scroll;
    background: #fcfcfc;
}
.home-container .menu-main {
    width: 43%;
    height:3000px;
    position: absolute;
    background-color: red;
    left: 300px;
}

<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
<div class="menu-main"></div>
</div>
</div>