设置溢出y会导致溢出x也发生变化 [英] Setting overflow-y causes overflow-x to change as well
问题描述
当我在块上设置 overflow-y 时，似乎正在影响 overflow-x 属性.我制作了 JSFiddle，并提供了此问题的示例.它似乎在所有浏览器中都在发生，所以我认为我缺少一些显而易见的东西.
When I set overflow-y on a block, it seems to be affecting the overflow-x property. I've made a JSFiddle with an example of this problem. It seems to be happening in all browsers, so I think I'm missing something that should be obvious.
我有两个不重叠的块(蓝色和绿色)以及第三个块(红色)，具有以下要求:
I have two non-overlapping blocks (blue and green) along with a third block (red) with the following requirements:
- 蓝色和红色块相邻
- 红色块包含在蓝色块中，但与绿色块重叠
- 蓝色框必须允许垂直滚动，但不允许水平滚动
但是，如果我将 overflow-x:visible 设置为红色，则红色块会向右重叠，相反，它的行为就像我将其设置为 scroll 一样.但是，如果删除 overflow-y 属性或将其设置为 visible ，则红色块的行为将与我预期的一样.
However, if I set overflow-x: visible so the red block overlaps to the right, instead it behaves as though I set it to scroll. However, if I remove the overflow-y property or set it to visible, the red block behaves as I expect.
我确实需要垂直滚动，所以我无所适从.
I do need vertical scrolling, so I'm at a loss for what to do.
使用下面的代码
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;
}
