logo标签列表

top: auto; 的行为让我感到困惑。

css
22

嗨，我对绝对定位的一些基础知识感到非常困惑。

<!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；正如我预期的那样工作。

任何解释都将不胜感激！

4个回答
6
您并没有真正定位这些元素，而是声明了要使用的定位类型。在这种情况下，auto值实际上并没有起到任何作用，因为#abs元素被放置在它通常应该出现的位置。如果您直接删除top:auto;部分，它对元素没有影响。
"bar"不会覆盖"foo"，因为您没有将其定位到该位置。它包含在#containingBlock元素中，并且位于块元素<p>下方，因为"foo"占用了离散的空间。您想要覆盖它吗？设置top或其他相应的位置值。重申其他人所说的，top:auto只会将该元素的顶部定位到尽可能高的位置（这是元素通常会做的）。
作为参考，auto值用于当父CSS属性覆盖子元素的样式时。例如，假设您有更复杂的代码，其中有一个规则适用于#containingBlock中的每个div，以应用边距。如果您想将其更改回正常状态，则应在包含块CSS中包含margin:auto;。
5
当您设置绝对定位（相对定位等）并且未指定元素的新位置时，它将被放置在没有绝对定位的情况下通常停留的位置。
将其设置为自动就像未指定顶部位置一样，因此它会被放置在段落下面，在没有应用特殊定位的情况下，它会停留在正常位置。
2

这很容易（开个玩笑！），auto和0并不是同一回事...嗯，我是说大多数情况下它们是相同的

auto是指呈现代理（浏览器）试图确定您的意思。在上面的第1种情况中，呈现代理足够聪明，知道有一个前置元素，因此允许它

正如您所指出的，如果您明确告诉它去到0，它会按照指示执行

交换源顺序也是一样的，然后它就足够聪明，知道没有任何前置内容，因此在这种情况下，auto将意味着0

1
我一再阅读到绝对定位会使元素脱离文档流。然而...听起来好像，当你设置了position:absolute后，auto的表现就像你已经设置了position:static。这是正确的吗？ - Dave C
Sitepoint的参考资料说：“如果top的值为auto（初始值），则该框的顶部边距边缘将定位在其包含块的顶部内容边缘。”这是错误的吗？ - Dave C
1
是的，有点像静态或相对定位，只是自动的。Sitepoints的参考资料并不总是正确的，在规范中它只是简单地说明了关于TOP的内容：“此属性指定绝对定位框的顶部边缘距离框包含块的顶部边缘的偏移量。”这意味着如果它是0，那么就没有偏移量，如果是自动的，它会尝试弄清楚你的意思，并且很可能通过考虑底部边框（或者是内容）框来实现。抱歉很难解释，但我不知道Sitepoint从哪里得到这个信息，而你的例子非常清楚地展示了应该发生的事情 :) - clairesuzy
^^前一个流元素的下边框/内容，实际上是它的边缘边缘。例如，在您的示例中向p添加边距，自动定位的div将清除底部边距。 - clairesuzy
1
不指定top/left会导致元素定位在静态情况下自然存在的位置，但由于周围内容与绝对定位内容的交互方式，它仍然被从文档流中取出（即：重叠）。我期望auto能够复制省略行为。 - morewry
0

使用auto作为top（或left）告诉浏览器以与元素具有“position: fixed”相同的方式定位元素。

这个jsfiddle演示了我的意思：http://jsfiddle.net/kUmKW/

尝试将left或top的值从auto更改为查看发生了什么。

1
错误，auto 在这里表示没有定位 https://developer.mozilla.org/pl/docs/Web/CSS/position，尽管示例很好。 - rofrol
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接