开启滚动后模态框关闭按钮消失问题求助

问题根源 #

关闭按钮使用position: absolute定位，父元素是.base-modal，而你给.base-modal添加了overflow-y: auto属性——当元素设置overflow为auto/hidden时，超出元素边界的内容会被裁剪隐藏。你的关闭按钮设置了top: -40px和right: -40px，完全跑到了.base-modal的外部区域，自然会被裁剪消失。

修复方案 #

把关闭按钮的定位父元素从.base-modal切换到模态框的外层容器（包裹.base-modal的盒子），让外层容器承担position: relative的定位上下文，这样关闭按钮的绝对定位就不会受.base-modal的overflow属性影响。

调整后的结构与样式示例

假设HTML结构如下：

<div class="modal-wrapper">
  <div class="base-modal">
    <!-- 模态框内容 -->
    <button class="base-modal__close">×</button>
  </div>
</div>

对应的Sass修改为：

.modal-wrapper
  position: relative  // 作为关闭按钮的定位父元素
  // 可添加模态框居中、背景遮罩等样式

.base-modal
  background: #FFFFFF
  border: 1px solid #E7EBFF
  border-radius: 20px
  padding: 32px 28px
  max-height: 90%
  overflow-y: auto  // 仅影响模态框内部内容滚动
  // 移除此处的position: relative

.base-modal__close
  position: absolute
  top: -40px
  right: -40px
  cursor: pointer
  width: 40px
  height: 40px

  path
    stroke: $light

如果无法调整HTML结构，也可以给.base-modal添加足够的外边距，并调整关闭按钮的定位值到容器内边距范围内，但这种方式不如调整定位父元素优雅。

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