4

这对你们来说可能是不费吹灰之力，但我试图了解绝对定位元素的默认行为。我读过从文档流中删除了绝对定位元素，这意味着周围元素的行为就好像它一开始就不存在一样。

现在，对于绝对定位元素的默认放置。它不应该出现在它的父级的左上角position: relative;吗？

我已经在J​​SFiddle上设置了一个例子来说明我的意思

此示例包含以下标记：

#top_header_nav {
  position: relative;
  display: table;
  margin: 0 auto;
}

ul {
  padding: 0;
  margin-left: 15px;
  margin-right: 15px;
}

li,
img,
ul {
  display: inline-block;
}

img {
  margin: 10px 30px 0px 30px;
}

li {
  font-size: 24px;
  margin-left: 30px;
}

li:first-child {
  margin-left: 0px;
}
<nav id="top_header_nav">
  <ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
  </ul>
  <img id="top_header_nav-logo" src="http://i1202.photobucket.com/albums/bb380/blogbiztutor/Blogger/Button/bth_google-logo.gif"></img>
  <ul>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
  </ul>
</nav>

这里的想法是媒体查询应该改变图像的位置，以显示在菜单的顶部。现在，将图像设置为position: absolute;导致图像不在左上角出现（如我所料），但以某种方式相对于标记中的前一个元素，第一个ul元素。我希望它根本不关心其他元素，只是它是具有相对定位的父元素。

这没什么大不了的，我可以添加left: 0;，但为什么默认情况下不会发生这种情况？只是试图把握绝对定位的本质。

4

1 回答 1

4

如果您将其设置img为position: absolute，它将脱离流程，但保持在正常流程中的位置。文档和其他元素的行为就像绝对定位的元素不存在一样。

只有通过应用top, bottom,left或right值，它才会真正去某个地方

来自 W3C 维基：

盒子从正常流程中取出。框的位置（可能还有大小）由“顶部”、“右侧”、“底部”和“左侧”属性指定。

W3C 维基 CSS：位置

注意：这已在此 SO 问题中得到答复

于 2013-10-22T10:10:45.997 回答