Question

当我在一个块上设置overflow-y时，它似乎正在影响overflow-x属性。我做了JSFiddle with an example of this problem。它似乎发生在所有浏览器中，所以我想我错过了一些显而易见的东西。

我有两个非重叠的块（蓝色和绿色）以及第三个块（红色），具有以下要求：

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

但是，如果我设置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

如果你使用overflow-x或overflow-y和另一个以外的东西。可见值是解释为自动。

设置overflow-y会导致overflow-x也发生变化

1 个答案: