How to space items with positition absolute

Issue

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 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>

Solution

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 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>

Answered By – tacoshy

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.