本文分析一个常见的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;，完美解决了子元素宽度超出父元素内容区域的问题，实现预期的布局效果。
