css+相对定位+前后层

CSS的相对定位可以帮助我们在文档流中调整元素的位置。加上前后层的技巧，可以制作出更加丰富的网页效果。

// HTML代码
<div class="container">
    <p class="top">这是上层文本</p>
    <p class="bottom">这是下层文本</p>
</div>

// CSS代码
.container {
    position: relative;
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.bottom {
    position: relative;
    z-index: 0;
}

在上面的代码中，我们给容器设置了相对定位，这样里面的元素就可以使用相对于容器的坐标进行定位。然后，我们给上层文本设置了绝对定位，这样它就脱离了文档流，并且可以使用top和left属性来指定它相对于容器左上角的偏移量。在此之后，我们使用z-index属性给上层文本设置了更高的层级，使它在下层文本之上。而下层文本则使用相对定位，并设置了一个更低的层级，以确保它在上层文本之下。这样，我们就得到了两层文本重叠的效果。