你好
我真的很困惑一些基本的绝对定位。
我真的很困惑一些基本的绝对定位。
<!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段落不重叠。
我知道我可以通过赋值0而不是auto来做到这一点，但是由于div#containsBlock没有填充，我认为auto和0会做同样的事情。
但是，如果段落和div#abs被切换到源代码中，使得bar到foo -top：auto之前;正如我所料。
任何解释赞赏！
解决方法
你没有真正定位这些元素，你只是宣布要使用什么类型的定位。在这种情况下，自动值不会真的做任何事情，因为#abs元素正好放置在正常的地方。如果你删除了顶部：auto;对于这个元素来说，它不会有任何影响。
“bar”不重叠“foo”，因为你没有定位它。它包含在#containingBlock元素内，并被放置在块元素< p>下方。因为“foo”占用了大量的空间。你想覆盖吗？设置顶部或其他相应的位置值。要重申别人所说的话，顶部：汽车只要把这个元素的顶部置于房间允许的高度(这是元素正常做的)。
为了将来参考，自动值用于父CSS属性覆盖子元素的样式时。例如，假设你有更复杂的代码，它有一个规则来对#containingBlock中的每个div应用边距。如果要将其恢复正常，则包括margin：auto;在你的containsBlock CSS。
