固定定位Flexbox中如何让按钮栏在图片下方新起一行不重叠？

问题原因 #

重叠的根源是.theImage设置了position: absolute，完全脱离了文档流，父容器的flex布局对该元素无效，同级的.buttonBar也不会自动避让它的位置，因此出现重叠。

解决方案 #

直接复用现有父级的flex布局，仅修改少量CSS即可实现需求，不需要改动HTML结构：

.modal-backdrop {
  display: flex;
  /* 改为垂直排列子元素 */
  flex-direction: column;
  /* 子元素靠右对齐，和你原来的右对齐效果一致 */
  align-items: flex-end;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  /* 去掉固定高度100%，改为自适应内容高度，避免多余空白 */
  height: auto;
  z-index: 1;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.96);
  transition: width 1s ease-out;
}

.buttonBar {
  height: 20px;
  color: red;
  /* 可选：和上方图片拉开间距 */
  margin-top: 8px;
}

.theImage {
  /* 去掉所有绝对定位相关属性，回归正常文档流 */
  width: 350px;
  height: 350px;
}

.button {
  float: left;
}

你现有JS里设置drawer高度的逻辑可以直接删除，修改后的父容器会自动根据图片+按钮栏的总高度调整自身高度，不需要手动计算。如果要保留原有JS逻辑也不会冲突，仅修改CSS即可解决重叠问题。

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