top的行为: auto；欺骗我
嗨，我真的对绝对定位的一些基础知识感到困惑。
<!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，-to make bar会出现在foo -top: auto；之前，效果完全符合我的预期。
任何解释都很感谢！
回答 4
Stack Overflow用户
发布于 2011-04-05 15:23:19
您并没有真正定位这些元素，您只是声明了您想要使用的定位类型。在本例中，abs值实际上没有任何作用，因为#abs元素被放置在它通常会被放置的位置。如果完全删除了top: auto;段，则不会对元素产生任何影响。
"bar“不是重叠的"foo”，因为你没有把它放在那里。它包含在#containingBlock元素中，并被放在块元素<p>的下面，因为"foo“占据了离散的空间量。你想推翻它吗？设置top或其他相应的位置值。为了重申其他人所说的话，top:auto只是将该元素的顶部放置在空间允许的高度(这是该元素通常所做的)。
为便于将来参考，当父auto属性重写子元素的样式时，将使用CSS值。例如，假设您有更复杂的代码，其中有一条规则是对#containingBlock中的每个div应用一个边距。如果你想把它改回正常，你应该在你的containingBlock CSS中包含margin:auto;。
Stack Overflow用户
发布于 2011-04-23 22:14:17
当您设置位置绝对(相对等)并且没有为元素指定新的位置时，它将被放置在如果没有position:absolute时它通常停留的位置。
将其设置为auto就像不指定顶部位置一样，因此它被放置在段落下，如果没有应用特殊位置，它通常会停留在该段落下。
Stack Overflow用户
发布于 2011-03-23 09:05:16
这很简单(J/K!)，auto和0不是一回事。嗯，我的意思是大多数时候是这样的。
auto是渲染代理(浏览器)尝试确定您的意思时。在上面的情况#1中，渲染代理足够聪明，知道有一个前面的元素，所以它允许它。
正如您正确地指出的那样，如果您显式地告诉它转到0，它将执行它被告知的操作
交换源代码顺序是相同的，这样它就足够聪明，知道前面没有任何东西，所以在这种情况下，auto将意味着0
https://stackoverflow.com/questions/5399708
复制相似问题
腾讯云开发者
