设置溢流-y会使溢流-x也发生变化[重复]。

Question

这个问题在这里已经有了答案:

CSS overflow-x: visible; overflow-y: hidden; 导致滚动条问题。 (6个答案)

封闭 3年前.

当我设置 overflow-y 在一个区块上，它似乎影响到了。overflow-x 财产。我做了一个 JSFiddle以这个问题为例. 这种情况似乎在所有的浏览器中都会发生，所以我认为我漏掉了一些应该很明显的东西。

我有两个不重叠的块（蓝色和绿色）以及第三个块（红色），要求如下。

• 蓝色和红色块是相邻的
• 红色块包含在蓝色块中，但它与绿色块重叠。
• 蓝色块必须允许垂直滚动，但不允许水平滚动。

然而，如果我设置 overflow-x: visible 因此，红色块向右重叠，而不是像我设置为 scroll. 然而，如果我删除 overflow-y 属性，或将其设置为 visible红色块的表现符合我的期望。

我确实需要垂直滚动，所以我不知道该怎么做。

使用下面的代码

HTML:

<div id="container">
    <div id="left">
        <div id="floater"></div>
    </div>
    <div id="right">
    </div>
</div>

CSS:

#container {
    height: 200px; width: 200px;
    position: relative;
    background-color: #ccc; border: solid 5px black;
}
#left {
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 100px;
    overflow-x: visible;
    overflow-y: auto;    /** REMOVING THIS CHANGES THE RESULT **/
    background-color: blue;
    z-index: 2;
}
#right {
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 100px;
    z-index: 1;
    background-color: green;
}
#floater {
    position: absolute;
    right: -20px; top: 30px; height: 40px; width: 40px;
    background-color: red;
}

Answer 1

请看。CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue.

如果你对溢出-x或溢出-y使用了可见性，而对另一个使用了可见性以外的东西，可见性的值会被解释为自动。