儿童位置绝对父亲亲属不起作用

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>

我知道绝对元素定位于其第一个定位（非静态）祖先元素。我已将元素nav的position属性设置为绝对值，但看起来<ul>范围内的<nav>已用完。换句话说，我很困惑为什么nav'height小于ul 非常感谢。

Answer 1

从文档流中删除绝对位置元素。所以父母的身高只会容纳其他元素。不是绝对的位置元素。

如果您希望父级覆盖绝对位置元素，则必须为父元素设置固定高度。你可以设置顶部：0;像其他人已经回答。但是你父母的身高仍然不会被绝对定位的元素决定，这就是ul在导航之外的原因。

Answer 2

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

同样display:block nav nav充分利用

＆＃13;

＆＃13;

nav {
  position: relative;
  display: block;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

在父级中使用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>

Answer 4

试试这个：

% cat addr.txt 
2
4
6
7
1
3
5

% cat data.txt 
1.000451451
2.000589214
3.117892278
4.479511994
5.484514874
6.784499874
7.021239396

% awk 'NR==FNR {a[NR]=$0; next} {print a[$0]}' data.txt addr.txt
2.000589214
4.479511994
6.784499874
7.021239396
1.000451451
3.117892278
5.484514874

nav {
  position: relative;
}

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