.outer-rel设置的有padding: 24px,.inner-rel还设置的有overflow:hidden,怎么让.absolute-child能够定位在.outer-rel的padding区域内且正常显示
时间: 2024-09-15 07:06:46 浏览: 16
当你设置了`.outer-rel`的`padding: 24px`和`.inner-rel`的`overflow: hidden`时,`.absolute-child`元素实际上会被限制在其父元素 `.inner-rel` 的可视区域之外,因为`overflow: hidden`会隐藏超出内容的部分。然而,由于`.outer-rel`的`padding`,你可以通过调整`.absolute-child`的`position`和`top/bottom/left/right`属性,让它依然能定位到`.outer-rel`的实际边界,即加上`padding`后的区域。
以下是如何做到这一点的例子:
1. 将`.absolute-child`的`position`设置为`relative`或`absolute`,而不是默认的`static`,以便它可以相对于`.outer-rel`定位。
2. 使用`.outer-rel`的`padding`值减去`.inner-rel`的`border`宽度(如果有的话)作为计算基础,来指定`.absolute-child`的位置。因为`padding`是在边框内部增加的空间,所以需要考虑边框的影响。
例如,假设`.inner-rel`的边框宽度为4px(总宽度=24px + 4px = 28px),则可以这样做:
```css
.outer-rel {
position: relative;
padding: 24px;
}
.inner-rel {
position: relative;
overflow: hidden;
border: 4px solid black; /* 假设边框颜色为黑色,用于演示 */
}
.absolute-child {
position: absolute;
top: -4px; /* 减去内边距和边框宽度 */
left: -4px;
width: auto; /* 如果不想设置宽度,保持自动即可 */
height: auto; /* 同上 */
}
```
在这个例子中,`.absolute-child`会从`.outer-rel`的顶部和左侧开始,偏移4px,使其恰好位于`.outer-rel`的内边缘。