Question

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

从包装器中删除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

Answer 1

默认情况下，overflow值为visible。因此，在第二种情况下，它将显示所有内容，并且没有滚动条。
在您的情况下，您无法将overflow-y: auto和overflow-x: visible保留在一个元素beacasue visible将您设置为auto时。了解它here

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

1 个答案: