flex布局父容器下position:absolute子元素的样式表现问题咨询

你观察到的表现完全符合CSS Flexbox的官方规范定义，具体逻辑如下：

• 绝对定位元素在flex容器中被归类为绝对定位flex子项，这类子项不参与flex布局的正常排布流程，不会和其他普通flex子项、其他绝对定位flex子项争夺布局空间，所以看起来互相之间没有交互。
• 绝对定位flex子项在未设置top、right、bottom、left等偏移属性时，默认的静态定位位置会按照flex对齐规则计算：父容器的justify-content、align-items，子项自身的align-self等flex相关属性都会生效，计算时默认把该子项当做父容器内唯一的flex子项处理，不会考虑其他子项的占位。
• 如果给绝对定位子项设置了任意方向的偏移值，对应方向的flex对齐效果会被覆盖，优先按照偏移属性定位。

你提供的测试代码整理 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.mainContainer {
  margin: 10vh auto;
  width: 80vh;
  height: 80vh;
  /* display: flex; */
  justify-content: center;
  /* align-items: center; */
  border: 1px solid red;
  /* position: relative; */
}

.alterContainer {
  position: absolute;
  /* z-index: 1; */
  /* top: 0; */
  align-self: center;
  width: 50vh;
  height: 50vh;
  background-color: #ccc;
  border: 1px solid green;
}

.alterContainer1 {
  position: absolute;
  align-self: center;
  /* top: 0; */
  /* z-index: 1; */
  /* top: 0; */
  width: 25vh;
  height: 25vh;
  border: 1px solid green;
}

HTML 代码 #

<div class="mainContainer">
  <div class="alterContainer"></div>
  <div class="alterContainer1"></div>
</div>

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