子位置绝对父相对不起作用答案

【问题标题】：Child position absolute parent relative doesn't work子位置绝对父相对不起作用
【发布时间】：2017-06-09 03:59:40
【问题描述】：

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

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's 非常感谢。

【问题讨论】：

试试top : 0px;。如果顶部是自动的，那么它默认为它们的位置
<nav position: relative> 你的意思是<nav style="position: relative">，对吧？
我不确定我是否完全了解您的问题，但最后一条语句听起来您可能需要nav 中的overflow: hidden;。
对不起，我没有清楚地描述我的问题，因为我的英语很糟糕。 <nav position: relative> 真正的意思是我已经将元素导航的属性位置设置为绝对。@Xufox
感谢您编辑我的问题以使其看起来更好@Xufox

标签： html css

【解决方案1】：

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

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

【讨论】：

非常感谢，这就是我正在寻找的答案。顺便说一句，我的英语太糟糕了，无法清楚地描述我的困惑，但你真的明白我的意思。

【解决方案2】：

在父级中使用display: block; 并在子级中添加top:0; 以与父级右侧对齐

nav {
  position: relative;
  display: block;
}

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

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

【讨论】：

感谢 jafarbtech，您的代码有效，但 @karthick 确实指出了核心问题，所以我必须投票给他。再次感谢:)

【解决方案3】：

也可以尝试top : 0px;。如果顶部是自动的，则默认为它们的position: static 值。查看此以获取更多详细信息：position: absolute without setting top/left/bottom/right?

还有display:block 代表nav 代表nav 充分利用

nav {
  position: relative;
  display: block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  top:0px;
  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>

【讨论】：

我试过了，但我发现它看起来元素
感谢 XYZ，您的代码有效，但 @karthick 确实指出了核心问题，所以我必须投票给他。再次感谢:)

【解决方案4】：

试试这个：

nav {
  position: relative;
}

.nav-right {
  display: inline-block;
  position: absolute;
  top: 0px;
  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>

【讨论】：

感谢 ehsan，您的代码有效，但 @karthick 确实指出了核心问题，所以我必须投票给他。再次感谢:)