October 22, 2024
Chicago 12, Melborne City, USA
CSS

Does flexbox center absolute positioned div if no bottom/top/right/left attrs provided?


Why is my menu (position: absolute) affected by align-items: center?

Using top: 0 solves the problem, but I’d like to find out why this fixes the issue.

.navbar {
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* WHY DOES THIS AFFECTS absolute positioned menu? */
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
}

.close {
  align-self: flex-end;
}

.burger,
.close {
  cursor: pointer;
  outline: none;
  border: none;
  background: none;
  padding: 0;
  user-select: none;
  display: inline-block;
}

.menu {
  display: block;
  position: absolute;
  width: 65vw;
  height: 300px;
  /* height: 100vh; */
  /* top: 0; IT SOLVES THE PROBLEM
  right: 0; */
  background-color: green;
  color: var(--dark-space-blue);
  z-index: 10;
}

.menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}
<nav class="navbar">
  <img src="assets/images/logo.svg" alt="">
  <button class="burger">
    <svg width="40" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="#00001A" fill-rule="evenodd"><path d="M0 0h40v3H0zM0 7h40v3H0zM0 14h40v3H0z"/><path d="M0 0h40v3H0z"/></g></svg>
  </button>

  <div class="menu">
    <button class="close">
      <svg width="32" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="#00001A" fill-rule="evenodd"><path d="m2.919.297 28.284 28.284-2.122 2.122L.797 2.419z"/><path d="M.797 28.581 29.081.297l2.122 2.122L2.919 30.703z"/></g></svg>
    </button>
    <ul>
      <li><a>Home</a></li>
      <li><a>New</a></li>
      <li><a>Popular</a></li>
      <li><a>Trending</a></li>
      <li><a>Categories</a></li>
    </ul>
  </div>
</nav>

codepen



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video