如何使用 overflow-y: auto 使绝对 div 扩展到包装器之外？答案

【问题标题】：How to make an absolute div extended beyond a wrapper with overflow-y: auto?如何使用 overflow-y: auto 使绝对 div 扩展到包装器之外？
【发布时间】：2017-05-26 08:25:15
【问题描述】：

我有一个带有 overflow-y: auto 的 div（红色包装器），其中包含一些项目。每个项目都有一个绝对定位的引导下拉菜单（绿色）。我似乎无法弄清楚为什么菜单没有扩展到包装器之外，而是为父包装器 div 创建了一个水平滚动。

从 wrapper 中移除 overflow-y 可以获得预期的效果（参见 wrapper2），但我松开了父级的垂直滚动。

<style>
    .wrapper {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
        overflow-y: auto;
        overflow-x: auto;
    }

    .menu {
        position: absolute;
        background: green;
        width: 150px;
        height: 70px;
        right: -20px;
        z-index: 1;
    }

    .wrapper ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
        position: relative;
    }

    .wrapper2 {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
    }

    .wrapper2 ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper2 li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
       position: relative;
    }
</style>
<div class="wrapper">
    <h4>
        A
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>





<div class="wrapper2">

    <h4>
        B
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>

FIDDLE

【问题讨论】：

但在第二种情况下，它确实在父级之外溢出，即当我删除包装器的垂直滚动时jsfiddle.net/x3nk6j3e/3
没有办法做到这一点。保持滚动 Y 滚动和滚动 X 可见，而不使用位置固定 + 用一点 javascript 定位菜单。看这里>stackoverflow.com/questions/5209545/…
谢谢。链接解释了很多

标签： css html

【解决方案1】：

默认情况下，overflow 值为visible。所以在第二种情况下，它将显示所有内容并且没有滚动条。
在您的情况下，您不能将overflow-y: auto 和overflow-x: visible 保留在一个元素上，因为当您将它们放在一起时，visible 将设置为auto。看看吧here

【讨论】：