要实现不使用相对父元素并填充子元素的叠加效果,可以使用绝对定位和负边距来实现。下面是一个示例代码:
HTML代码:
CSS代码:
.container {
position: relative;
width: 300px;
height: 300px;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
margin-top: -50px;
margin-left: -50px;
}
.box:nth-child(2) {
background-color: green;
margin-top: -25px;
margin-left: -25px;
}
.box:nth-child(3) {
background-color: blue;
margin-top: -12.5px;
margin-left: -12.5px;
}
在上面的代码中,.container
元素被设置为相对定位,然后每个 .box
元素都使用绝对定位。通过给每个 .box
元素设置负的 margin-top
和 margin-left
,使得每个元素都能够填充在相同的位置上,从而实现叠加效果。
注意,为了达到叠加效果,每个 .box
元素的 margin-top
和 margin-left
的值应该是前一个元素的一半,即第一个元素的值为-50px,第二个元素的值为-25px,第三个元素的值为-12.5px。这样就能够让每个元素都居中填充在父元素的位置上。
通过这种方式,可以实现不使用相对父元素并填充子元素的叠加效果。