嗨,我真的很困惑一些绝对定位的基础知识.
<!DOCTYPE html>
<html>
<head>
<link href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" rel="stylesheet" type="text/css" />
<style>
#containingBlock {
position: relative;
background: green;
}
#abs {
position: absolute;
background: blue;
top: auto;
}
</style>
</head>
<body>
<div id="containingBlock">
<p>foo</p>
<div id="abs">bar</div>
</div>
</body>
</html>
使用如上所述的标记,div#abs不与foo段重叠.
我知道我可以通过给top值0而不是auto来做到这一点,但是因为div#containingBlock没有填充,我认为auto和0会做同样的事情.
但是,如果段和div#abs在源顺序中切换 - 使得bar在foo -top:auto之前出现; 完全符合我的预期.
任何解释都赞赏!
你没有真正定位这些元素,你只是声明了你想要使用的定位类型.在这种情况下,该auto值实际上并没有做任何事情,因为#abs元素正好放在正常情况下.如果您top: auto;完全删除了该段,则它对该元素没有影响.
"bar"与"foo"不重叠,因为您没有将它定位为"foo".它包含在#containingBlock元素中,并放在块元素下面,<p>因为"foo"占用了一定量的空间.你想覆盖它吗？设置top或其他相应的位置值.重申其他人所说的话,top:auto只需将该元素的顶部置于房间允许的最高位置(这是该元素通常会做的).
为了将来参考,该auto值用于父CSS属性覆盖子元素的样式时.例如,假设你有更复杂的代码,它有一个规则来为#containingBlock中的每个div应用一个边距.如果要将其更改回正常,则应包含margin:auto;在containsBlock CSS中.
当您设置绝对位置（相对等）并且不为元素指定新位置时，如果没有position:absolute，它将被放置在通常放置的位置。
将其设置为自动就像不指定顶部位置一样，因此它会被放置在如果没有应用特殊定位时通常会停留的段落下方。
这很简单（J/K！），auto 和 0 不是一回事..我的意思是大多数时候它们是
auto是渲染代理（浏览器）尝试决定您的意思的时候。在上面的情况 #1 中，渲染代理足够聪明，知道有一个前面的元素，因此它允许它
正如您正确指出的那样，如果您明确告诉它转到 0，它就会执行它所告诉的操作
交换源顺序是相同的，然后它足够聪明，知道它前面不再有任何内容，因此在这种情况下 auto 将意味着 0