如何使用位置绝对的空间项

Question

我正在页的左上角开发一个导航栏。为了防止它将内容移到较低的位置，我将位置设置为绝对值。我现在的问题是，每个项目都是重叠的。

​

.nav-item {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 10px;
}
.nav-item:hover p {
    color: #909590;
}

<nav>
        <a href="index.html">
            <section class="nav-item">
                <img src="assets/home.svg" alt="home">
                <p>Home</p>
            </section>
        </a>
        <a href="commissions.html">
            <section class="nav-item">
                <img src="assets/dollar-sign.svg" alt="dollar-sign">
                <p>Commissions</p>
            </section>
        </a>
    </nav>

​

Answer 1

只需将position-property应用于容器，而不是每个单独的元素(这会导致冲突)：

​

nav {
  position: absolute;
  top: 0;
  right: 10px;
}

/* original CSS */
.nav-item {
  display: flex;
  justify-content: center;
}

.nav-item:hover p {
  color: #909590;
}

<nav>
  <a href="index.html">
    <section class="nav-item">
      <img src="assets/home.svg" alt="home">
      <p>Home</p>
    </section>
  </a>
  <a href="commissions.html">
    <section class="nav-item">
      <img src="assets/dollar-sign.svg" alt="dollar-sign">
      <p>Commissions</p>
    </section>
  </a>
</nav>

​