未设方位属性时Flexbox是否居中绝对定位div？为何align-items影响绝对定位菜单？

问题1 #

如果不给设置position: absolute的div添加top、bottom、right、left属性，Flexbox会将其居中吗？

问题2 #

我的设置了position: absolute的菜单为何会被align-items: center影响？使用top: 0可以解决该问题，我想了解此操作修复问题的原因。

相关代码示例 #

CSS代码

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

HTML代码

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

解答 #

问题1解答

不会。当元素设置position: absolute但未指定top/bottom/right/left时，它不会被Flexbox主动居中，而是停留在它在文档流中的“静态位置”——也就是作为Flex子项时，Flex布局原本给它分配的位置。此时它虽然脱离了文档流，但因为没有被定位偏移，所以会保留Flex容器对齐规则（比如align-items: center）带来的位置效果，但这不是Flexbox主动将其居中，只是它没被移动而已。

问题2解答

这是绝对定位的特性导致的：

• 当绝对定位元素**未设置任何偏移属性（top/bottom/right/left）**时，它会保持在自身的“静态位置”，也就是它作为Flex容器子项时，Flex布局给它的位置。所以.navbar的align-items: center会在交叉轴上对齐这个子项，哪怕它是绝对定位的。
• 当你添加top: 0后，就明确指定了该元素的定位规则：它的顶部要和最近的定位祖先（如果父元素未设置position，则为视口）的顶部对齐。一旦设置了任意偏移属性，元素就会脱离原本的静态位置，完全按照定位规则来摆放，不再受Flex容器的对齐规则影响，因此align-items: center就对它失效了。

内容的提问来源于stack exchange，提问作者DavidAls