子div随机定位偶尔溢出父div，如何阻止该问题？

嘿，我看你遇到了子元素定位不稳定的问题——每次刷新都乱跑，调尺寸和偏移量也不管用。先给你揪出问题根源，再一步步解决：

核心问题所在 #

你给子元素#shape用了position: relative，但父容器#box没有设置定位参考！相对定位是基于元素自身的初始位置偏移，而且不会脱离文档流，这就导致一旦页面布局计算有波动，它很容易跑出父容器的范围。

修复方案 #

1. 给父容器设置定位参考

先给#box加上position: relative，这样它就会成为子元素绝对定位的“锚点”：

#box { 
  width: 1000px; 
  height: 400px; 
  background-color: grey; 
  margin: 0; 
  padding: 0;
  position: relative; /* 新增这行，关键！ */
}

2. 把子元素改成绝对定位

把#shape的定位方式换成position: absolute，这样它的top/left等偏移属性就会相对于父容器#box生效，完全脱离文档流，不会受其他元素布局影响：

#shape { 
  display: none; 
  position: absolute; /* 替换原来的relative */
  /* 可以按需设置初始位置，比如 top: 20px; left: 20px; */
}

3. 可选：限制溢出范围

如果#shape的内容可能超出父容器，给#box加个溢出控制，避免内容乱跑：

#box {
  /* 其他样式不变 */
  overflow: hidden; /* 溢出部分直接隐藏，也可以选overflow: auto显示滚动条 */
}

为啥之前调整没用？ #

因为相对定位的元素偏移后，它原本在文档流里的位置还保留着，偏移是基于自己的初始位置，不是父容器。换成绝对定位后，元素的定位完全以父容器为参考，再调top/left就能精准控制在父容器内部了。

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