Question

考虑HTML：

<html>
    <body>
        <div id="outer"><div id="inner"></div></div>
    </body>
<html>

它的CSS：

#inner {
    height: 75px;
    width: 75px;
    background-color: red;
    position: absolute;
    margin-left: 20px;
}
#outer {
    height: 1500px;
    width: 150px;
    background-color: green;
    position:static;
    margin-left: 100px;
}

根据我的理解，内部div应该具有来自html元素的20px左边距而不是来自外部div，因为外部div具有静态位置。但似乎内部div总是相对于外部div来定位。我在这里缺少什么？

如果有人可以提供帮助，谢谢。

修改：

资料来源：www.codecademy.com

Answer 1

clear cache从正常流中移除元素，并将其自身相对于最近定位的祖先定位。如果不存在，则将其自身定位到初始包含块，该块包含视口的尺寸。 Reference

尽管如此，对于clear data元素，您应该始终指定x和y维度（例如position: absolute;和absolute），否则您可能会遇到一些奇怪的行为，例如其定位相对于您正在观察的top祖先元素。查看添加left和static时会发生什么：

＆＃13;

top

＆＃13;

left

＆＃13;

Answer 2

元素相对于其第一个定位（非静态）祖先元素定位。因此，内部div将根据包含它的父元素定位自己，在这种情况下，＆＃34;外部＆＃34; DIV。

＆＃34;位置：绝对＆＃34;在CSS中的用法

2 个答案: