css – top的行为：auto;竹les我

你好
我真的很困惑一些基本的绝对定位。

<!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。

css – top的行为：auto;竹les我

解决方法

相关文章