绝对定位元素仅顶部被截断问题求助

我有一个类名为recent-files-container的div，内部包含类名为box的div。box设置为position: relative，其内部有一个类名为x-btn的绝对定位div。我想通过设置负的top和right值，让x-btn显示在box的右上角外侧，但目前x-btn的顶部被截断隐藏。注释掉recent-files-container的overflow: auto属性时，x-btn能正常显示，但这个容器需要overflow: auto来适配动态数量的box元素。

相关代码 #

HTML结构

<div className="recent-files-container">
  <div className="box">
     <div
        className="drag-box"
        ref={drag}
        style={{
          border: isDragging ? "3px solid #8b3dff" : "0px",
          opacity: isDragging ? 0.5 : 1,
          cursor: "grab",
        }}
      >
        <img src={file.data} alt={file.name} />
      </div>
       <div className="x-btn">
          X
        </div>
  </div>
</div>

CSS样式

.content .recent-files-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  margin-top: 15px;
}

.recent-files-container .box {
  background-color: #353738;
  width: calc(33.33% - 10px);
  height: 110px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.box .drag-box {
  width: 100%;
  height: 100%;
}

.box .drag-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box .x-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #8b3dff;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
}

下面是几种既能保留recent-files-container的overflow: auto，又能让x-btn完整显示的实用方法：

• 给容器添加上内边距并调整高度
  overflow: auto会裁剪超出容器内容区的元素，给recent-files-container添加上内边距，让x-btn的顶部超出部分有容纳空间，同时用calc调整容器高度，抵消内边距对整体尺寸的影响。

• 更换x-btn的定位父容器
  如果页面结构允许，把x-btn移到recent-files-container的同级或更高层级（无overflow裁剪的容器），通过JS计算box的位置，动态设置x-btn的坐标，让它对应到box的右上角。

• 用clip-path自定义裁剪区域（兼容性一般）
  放弃overflow: auto的默认裁剪，用clip-path只裁剪容器内的滚动区域，留出顶部空间给x-btn，但这种方法需要精确计算路径，复杂度较高。

方法一：添加内边距的代码修改示例 #

修改recent-files-container和box的CSS：

.content .recent-files-container {
  width: 100%;
  /* 用calc抵消padding-top的高度，保持容器整体高度不变 */
  height: calc(100% - 15px);
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  margin-top: 15px;
  /* 添加顶部内边距，容纳x-btn的超出部分 */
  padding-top: 15px;
}

.recent-files-container .box {
  background-color: #353738;
  width: calc(33.33% - 10px);
  height: 110px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  /* 移除margin-top，避免和容器padding叠加导致间距过大 */
  margin-top: 0;
}

修改后，x-btn的顶部超出部分会落在容器的内边距区域，不会被裁剪，同时容器的滚动功能完全保留。

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