Question

这对你们来说可能是一个明智的选择，但我正在努力理解绝对定位元素的默认行为。我已经读过，从文档流中删除了一个绝对定位元素，这意味着周围元素的行为就像它首先不存在一样。

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

我已经在JSFiddle

上设置了我的意思

此示例包含以下标记：

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

CSS非常基础：

#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;
 }

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

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

Answer 1

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

只有应用top，bottom，left或right值，才能让它 go 某处

来自W3C wiki：

将盒子从正常流程中取出。盒子的位置（和可能的大小）用'top'，'right'，'bottom'和 '左'属性。

W3C wiki CSS:position

注意：已回复in this SO question

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

1 个答案: