了解绝对定位元素的默认位置

debugcn 发表于 Dev

肯尼·博恩斯（Kenny Bones）

对于你们来说，这也许很容易，但是我试图理解绝对定位元素的默认行为。我读过一个绝对定位的元素已从文档流中删除，这意味着周围的元素的行为就好像它根本不在那儿一样。

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

我已经建立了一个我在JSFiddle上的意思的例子

此示例包含以下标记：

#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;，这没什么大不了的，但是为什么默认情况下不会发生这种情况呢？只是试图把握绝对定位的本质。

潘代奥洛

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

只有通过应用top，bottom，left或right值，将它实际上去的地方

从W3C Wiki：