可变宽度纵向可滚动Modal的关闭按钮固定右上角实现方案问询

解决方案 #

方案1：无需修改HTML结构，仅调整CSS（推荐） #

核心使用sticky定位实现滚动时固定，完美适配Modal动态宽度特性：

/* 仅需要修改.close的样式，其余原有CSS保留 */
.close {
  float: right;
  color: red;
  font-size: 48px;
  position: sticky;
  /* 固定在滚动容器顶部 */
  top: 0;
  right: 0;
  cursor: pointer;
  /* 避免被Modal内容遮挡 */
  z-index: 1;
}

原理说明

sticky定位兼具相对定位和固定定位的特性，在父容器（即设置了overflow-y: auto的.Modal）滚动时，会一直吸附在你设定的top: 0位置，配合float: right自动靠右，完全不需要设置固定的水平偏移值，天然适配Modal的动态宽度。

方案2：拆分Modal结构，实现更灵活的样式控制 #

如果后续需要对Modal头部、内容区做更多自定义，可以拆分结构实现：

修改后的HTML

<div class="ModalBlur">
  <div class="Modal">
    <div class="close">X</div>
    <div class="modal-content">
      This modal is different widths.
      <br>Depending on the screen.
      <br>you view it on.
      <br>It may
      <br>get so long
      <br>you have to scroll.
    </div>
  </div>
</div>

修改后的CSS

.ModalBlur {
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000040;
    overscroll-behavior: contain;
}

.Modal {
  position: relative;
  background: white;  
  padding: 16px;
  margin: 16px;
  /* 移除原来的overflow和max-height，转交给内容区 */
}

.modal-content {
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 预留右侧空间避免内容和关闭按钮重叠，可根据按钮大小调整 */
  padding-right: 50px;
}

.close {
  color: red;
  font-size: 48px;
  /* 相对于Modal容器绝对定位，固定在右上角 */
  position: absolute;
  top: 0;
  right: 16px;
  cursor: pointer;
  z-index: 1;
}

原理说明

将滚动逻辑转移到内部内容区，外层Modal容器仅做定位和布局用，关闭按钮通过绝对定位挂在Modal容器的右上角，不会跟着内部内容滚动，同样适配任意宽度的Modal。

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