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>