滑块画廊重叠其他DOM元素，求布局修复解决方案

核心问题修正方向 #

滑块画廊重叠页面元素，本质是元素脱离文档流或容器未形成有效约束导致的，针对你已做的尝试，调整方案如下：

1. 给.slider建立定位上下文，约束.slides的溢出 #

如果.slides使用了position:absolute，必须给父容器.slider设置position:relative，否则.slides会相对于外层元素定位，同时通过overflow:hidden隐藏溢出内容：

.slider {
  position: relative; /* 为子元素absolute定位提供参照 */
  width: 100%;
  max-width: calc(100% - 40px); /* 按需求调整间距适配值 */
  overflow: hidden; /* 截断.slides溢出的部分 */
  aspect-ratio: 16/9; /* 可选：固定画廊宽高比，避免高度塌陷 */
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 继承父容器高度，避免超出范围 */
  display: flex; /* 保持滑块横向排列 */
}

2. 优化.building--container的flex布局逻辑 #

用flex管理容器时，用gap替代margin实现可靠间距，同时给.slider设置自适应规则，防止被挤压或溢出：

.building--container {
  display: flex;
  gap: 20px; /* 容器内元素的间距，无需单独给子元素加margin */
  padding: 20px; /* 容器内边距，避免画廊贴边 */
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

.slider {
  flex: 1 1 calc(50% - 10px); /* 两列布局，自动适配gap间距 */
  min-width: 300px; /* 设置最小宽度，避免滑块过小 */
}

3. 统一盒模型，确保calc计算准确 #

全局设置box-sizing:border-box，避免padding、border额外占用宽度导致尺寸计算偏差：

* {
  box-sizing: border-box; /* 让元素的width包含padding和border */
}

.slider {
  max-width: calc(100% - 40px); /* 此时的40px为左右间距总和，计算无偏差 */
}

4. 修正滑块横向排列的宽度逻辑 #

如果是横向滚动的多滑块，让.slides宽度自适应子项总和，同时禁止滑块被压缩：

.slides {
  width: fit-content; /* 自动适配所有子滑块的总宽度 */
  height: 100%;
}

.slides > .slide-item {
  width: 100%; /* 每个滑块占满.slider的宽度 */
  flex-shrink: 0; /* 防止滑块被压缩变形 */
}

验证步骤 #

1. 给.slider添加临时border:1px solid red，确认容器是否正确包裹.slides
2. 检查.slides的定位参照是否为.slider，而非外层其他元素
3. 排查页面其他元素的margin/padding是否与画廊间距冲突

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