css 子元素不超出父元素范围

作者：▄对对碰发布日期:2025-11-06 浏览:66

/* 父元素设置相对定位，并且设置溢出隐藏 */
.parent {
  position: relative;
  overflow: hidden;
}

/* 子元素设置绝对定位，确保在父元素范围内 */
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保 padding 和 border 不会超出父元素的范围 */
}

解释说明：

父元素 (parent):
- position: relative;：使父元素成为子元素的定位上下文。
- overflow: hidden;：确保子元素不会超出父元素的边界。
子元素 (child):
- position: absolute;：使子元素相对于最近的已定位父元素进行定位。
- top: 0; left: 0; width: 100%; height: 100%;：确保子元素完全填充父元素的范围。
- box-sizing: border-box;：确保子元素的 padding 和 border 不会增加其宽度和高度，从而避免超出父元素的范围。

上一篇：css 宽度自适应占满

下一篇：outline:none在css中的作用