How to space items with positition absolute-CodePudding

I am developing a navbar in the top left of the page. To prevent it from moving the content far down, I set the position to absolute. My problem now, is that each item is overlapping.

.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 >
                <img src="assets/home.svg" alt="home">
                <p>Home</p>
            </section>
        </a>
        <a href="commissions.html">
            <section >
                <img src="assets/dollar-sign.svg" alt="dollar-sign">
                <p>Commissions</p>
            </section>
        </a>
    </nav>

CodePudding user response：

Just apply the position-property to the container instead of every single element (which causes the collision):

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 >
      <img src="assets/home.svg" alt="home">
      <p>Home</p>
    </section>
  </a>
  <a href="commissions.html">
    <section >
      <img src="assets/dollar-sign.svg" alt="dollar-sign">
      <p>Commissions</p>
    </section>
  </a>
</nav>

CodePudding user response：

As I understood this will solve your problem. But I user flex properties instead of position absolute

  nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  .nav-item:hover p {
    color: #909590;
  }

  .nav-item {
    display: flex;
    align-items: center;
  }