一种不使用CSS position: relative 的方法是使用 display: flex 和 z-index 属性来控制图像的重叠顺序。
代码示例:
HTML:
CSS:
.container {
display: flex;
}
.image {
z-index: 1;
}
这里,我们首先创建一个容器元素,使用 display: flex 属性使图像水平排列。然后,通过将 .image 类的 z-index 属性设置为 1,可以控制图像的层叠顺序。在这个示例中,所有图像都具有相同的 z-index 值,因此它们将根据其在 HTML 中的顺序重叠。
请注意,这只是一种不使用 position: relative 实现重叠图像的方法之一,具体取决于您的需求和其他 CSS 规则。