html - child 位置绝对 parent 亲戚不起作用

Question

我正在尝试实现类似网页导航栏的功能。我有这样的代码:

nav {
  position: relative;
  display: inline-block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  right: 0px;
  list-style: none;
}

<nav>
  <h2>My First Website</h2>
  <ul class="nav-right">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

我知道绝对元素定位到它的第一个定位(非静态)祖先元素。我已将元素导航的位置属性设置为绝对，但它看起来像 <ul>用完 <nav>范围。换句话说，我对为什么 nav'height 小于 ul 感到困惑非常感谢。

Answer 1

绝对位置元素已从文档流中移除。所以父级的高度将只包含其他元素。不是绝对位置元素。

如果你想让你的父元素覆盖你的绝对位置元素，那么你必须为父元素设置一个固定的高度。你可以设置 top: 0;就像其他人的回答一样。但是你 parent 的高度仍然不会由绝对定位元素决定，这就是 ul 在 nav 之外的原因。