如何在缩小窗口时保持absolute定位元素相对位置不溢出父容器

问题原因 #

你当前为.content元素设置了固定像素值的left、top定位，当父容器.box（随视口大小变化）的宽度小于「700px + 表格自身宽度」、高度小于「220px + 表格自身高度」时，表格自然会溢出父容器边界。

可行解决方案 #

方案1：纯CSS实现（推荐） #

通过相对单位+边界限制逻辑，既保留近似的相对位置，又保证不会溢出父容器：

.box {
  border: 5px solid red;
  position: absolute;
  inset: 0; /* 替代top/right/bottom/left的0设置，写法更简洁，不兼容旧版浏览器可换回原写法 */
  box-sizing: border-box; /* 把边框宽度算入容器总尺寸，避免边框撑大容器出现滚动条 */
}

.content {
  position: absolute;
  resize: both;
  /* 核心逻辑：用min限制最大偏移量，确保元素右边界不会超出父容器 */
  left: min(36.5vw, calc(100% - 200px)); 
  /* 36.5vw是原700px相对于1920px宽度视口的比例，可根据你的设计稿基准宽度调整 */
  /* 200px是你表格的近似宽度，可根据实际表格宽度修改 */
  top: min(23vh, calc(100% - 150px));
  /* 23vh是原220px相对于960px高度视口的比例，150px是表格近似高度 */
  z-index: 0;
}

table {
  max-width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
  /* 上面三个属性保证表格内容不会撑爆容器，宽度自适应 */
}

如果你有多个动态坐标的表格，也可以直接把限制逻辑写在行内style里：

<div class="content" style="left: min(700px, calc(100% - 200px)); top: min(220px, calc(100% - 150px)); z-index: 0;">

方案2：JS动态适配（适合坐标动态生成的场景） #

如果表格的坐标是后台生成或者用户拖拽生成的，可以监听窗口resize事件实时调整位置：

function adjustContentPosition() {
  const box = document.querySelector('.box')
  const contents = document.querySelectorAll('.content')
  const boxWidth = box.clientWidth
  const boxHeight = box.clientHeight
  
  contents.forEach(el => {
    const elWidth = el.offsetWidth
    const elHeight = el.offsetHeight
    // 读取原设置的left/top原始值（存在dataset里避免读取计算值的误差）
    const originLeft = parseInt(el.dataset.originLeft || 700)
    const originTop = parseInt(el.dataset.originTop || 220)
    
    el.style.left = Math.min(originLeft, boxWidth - elWidth) + 'px'
    el.style.top = Math.min(originTop, boxHeight - elHeight) + 'px'
  })
}

// 初始化 + 窗口变化时触发
window.addEventListener('resize', adjustContentPosition)
adjustContentPosition()

对应的HTML需要给.content加原始坐标的自定义属性：

<div class="content" data-origin-left="700" data-origin-top="220" style="z-index: 0;">

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