css - 使div溢出:hidden effective without positioning it

Question

我有 3 个 div:

1. (蓝色)包含 position: relative
的 div
2. (红色)div，带有溢出:隐藏，向左浮动
3. (绿色)带有 position: absolute 的 div，我希望它相对于第一个 div 定位。

参见 jsfiddle .

我希望绿色 div 隐藏在红色 div 之外，因此使 overflow: hidden 工作而不定位它，因为我希望绿色 div 相对于蓝色 div 定位。

我发现了一些类似的问题，但没有一个真正适合这种情况。

Answer 1

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

现在，您的绿色 div 相对于蓝色 div 是绝对定位的，但只要发生这种情况，它就会受蓝色 div 而非红色 div 的溢出规则的约束。

当你使用绝对定位时，被定位的元素被最近的具有相对定位的父元素的溢出所约束，如果没有其他元素存在则最终是窗口。

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

    position:relative;
}

JSFiddle