css布局：解决绝对定位子元素与父元素padding冲突

本文分析一个常见的CSS布局难题：如何使绝对定位的子元素宽度精确匹配父元素的内容区域宽度（排除padding影响）。

问题： 父元素采用相对定位并设置了padding属性，其内部的绝对定位子元素宽度设置为100%。然而，由于绝对定位的特性，子元素的宽度基于父元素的边框计算，包含了padding，导致子元素宽度超出预期。

代码示例：

<div class="container">
  <div class="info"></div>
</div>

body {
  background: red;
}
.container {
  position: relative;
  width: 400px;
  height: 400px;
  background: blue;
  padding: 20px;
}
.info {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
}

问题根源： 绝对定位子元素的定位起点是父元素的padding边界，而非内容区域边界。因此，width: 100% 指的是父元素的总宽度（包含padding）。

解决方案：

为了让子元素宽度仅占据父元素内容区域，需将子元素的left和top属性设置为0。这将使子元素的定位起点移动到父元素内容区域的左上角，从而使其宽度精确等于父元素内容区域的宽度。

修改后的CSS代码：

.info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

通过设置left: 0; top: 0;，完美解决了子元素宽度超出父元素内容区域的问题，实现预期的布局效果。