首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >top的行为: auto;欺骗我

top的行为: auto;欺骗我
EN

Stack Overflow用户
提问于 2011-03-23 08:57:35
回答 4查看 8.8K关注 0票数 21

嗨,我真的对绝对定位的一些基础知识感到困惑。

代码语言:javascript
复制
<!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;之前,效果完全符合我的预期。

任何解释都很感谢!

EN

回答 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;

票数 6
EN

Stack Overflow用户

发布于 2011-04-23 22:14:17

当您设置位置绝对(相对等)并且没有为元素指定新的位置时,它将被放置在如果没有position:absolute时它通常停留的位置。

将其设置为auto就像不指定顶部位置一样,因此它被放置在段落下,如果没有应用特殊位置,它通常会停留在该段落下。

票数 4
EN

Stack Overflow用户

发布于 2011-03-23 09:05:16

这很简单(J/K!),auto和0不是一回事。嗯,我的意思是大多数时候是这样的。

auto是渲染代理(浏览器)尝试确定您的意思时。在上面的情况#1中,渲染代理足够聪明,知道有一个前面的元素,所以它允许它。

正如您正确地指出的那样,如果您显式地告诉它转到0,它将执行它被告知的操作

交换源代码顺序是相同的,这样它就足够聪明,知道前面没有任何东西,所以在这种情况下,auto将意味着0

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5399708

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档