使div溢出：隐藏有效而无需定位

Question

我有3个div：

1. （蓝色）包含带有position: relative
的div
2. （红色）div与overflow: hidden，向左浮动
3. （绿色）div position: absolute我希望相对于第一个div定位。

请参阅jsfiddle。

我希望绿色div隐藏在红色div之外，因此overflow: hidden无法定位它，因为我希望绿色相对于蓝色定位。

我发现了一些类似的问题，但没有一个真正符合同样的情况。

Answer 1

您走在正确的轨道上，但您需要让红色div具有相对定位。

现在，你的绿色div正相对于蓝色div定位，但只要发生这种情况，就会受到蓝色的溢出规则的限制，而不是红色的溢出规则。

使用绝对定位时，定位元素受最近父元素溢出的相对定位限制，最终窗口没有其他元素。

.two{
    background-color: red;
    overflow: hidden;
    float: left;

    position:relative;
}

JSFiddle

Answer 2

我认为这只是不可能仅使用css。你可以让它看起来像你在谈论使用javascript或jquery相当容易，但我不确定你是否想要这种形式的答案。