绝对定位问题

Question

我找不到标题，因为这是一个复杂的问题。

假设我有这个：

<div style="color:red;width:900px;height:250px;">
I Can Control This DIV
</div>

<div style="position:absolute;top:0px;color:green;width:40px;height:40px">
I CANNOT control this DIV
</div>

有没有办法让第一个div保留它的区域，并且0px应该在它下面。

我的意思是，我希望第二个div留在第一个div下面，就像它在iframe中一样，但我根本不想使用iframe或frame。

有什么办法吗？如果它是Javascript解决方案，我没有问题。

谢谢

Answer 1

您可以将第二个div封装在position:relative容器中。这样，top:0px将从该div而不是整个窗口中计数：

http://jsfiddle.net/z9KbD/

解释在position:absolute的定义中:生成一个绝对定位的元素，相对于具有非静态位置的第一个父元素定位。

Answer 2

你能把它们都包装在另一个div中，让它们控制那个吗？

Answer 3

如果你给第二个div一个clear:both，我想这就是你想要的。本质上，它将充当该div的回车。

顺便说一句，如果你想绝对定位一个元素，你需要一个包含它的父元素来进行相对定位。克里斯·科伊尔在深度here中介绍了这一点。