如果没有提供底部/顶部/右/左属性，Flexbox是否居中绝对定位的div？

Question

为什么我的菜单（

position: absolute

）会受到

align-items: center

的影响？

使用

top: 0

解决了问题，但我想知道为什么这可以解决问题。

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

代码笔

Answer 1

来自规格

Flex 容器的绝对定位子项的静态位置是确定的，以便子项的定位就像它是 Flex 容器中唯一的 Flex 项目一样，

这会导致

这样做的效果是，如果你设置了，例如，align-self: center;在 Flex 容器的绝对定位子项上，子项上的自动偏移将其置于 Flex 容器的横轴中心。

所以在处理绝对元素时永远不要依赖静态位置。始终设置上/左/右/下以完全控制位置。