绝对定位问题

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或帧。

任何方式？我不知道它是否是Javascript解决方案。

谢谢

Answer 1

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

http://jsfiddle.net/z9KbD/

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

Answer 2

你可以将它们包装在另一个div中并控制那个吗？

Answer 3

如果你给第二个div clear:both，那应该是我认为你正在寻找的技巧。从本质上讲，它将作为该div的回车。

在旁注中，如果您希望绝对定位元素，则需要包含它的父元素相对定位。 Chris Coyier深入探讨了here。