如何让modal弹出时不将页面其余内容向下挤压？

错误原因 #

• .modal当前设置的position: relative属于相对定位，元素仍会占据正常文档流的物理空间，因此显示时会自然挤压下方的.main元素，该问题和z-index的设置没有关系
• z-index属性仅对设置了非static定位的元素生效，.main未设置任何定位属性，你给它添加的z-index:1不会生效

修复方案 #

调整.modal的定位规则，让它脱离文档流，即可避免挤压其他元素，修改后的CSS代码如下：

.modal {
  background-color: rgb(162, 154, 170);
  width: 70vw;
  height: 70vh;
  /* 替换原有relative定位为fixed，脱离文档流+相对于视口定位 */
  position: fixed;
  /* 以下三行实现相对于视口居中 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
} 

.main {
  display: flex;
  justify-content: center;
  margin: 40px;
  gap: 100px;
}

规则说明 #

• position: fixed会让元素完全脱离正常文档流，不会占用页面的原有空间，显示时自然不会挤压其他元素
• left:50%+top:50%会让元素的左上角对齐视口中心，再通过transform: translate(-50%, -50%)把元素自身向左、向上偏移自身宽高的一半，实现精准居中
• fixed定位的元素默认层级高于普通文档流元素，只要modal的z-index大于0，就会自动覆盖在.main元素上方，不需要给.main额外设置z-index

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