使用CSS将元素放置在另一个对象前面

我是CSS新手，这次我想把我的对象放在slider前面，所以我读了这篇文章，我知道slider应该有

position:relative

和我的另一个对象p

position:absolute

期望结果：

所以我这么做了，但它不起作用，而且对象也没有响应，我如何修复它？我准备了一个如何工作的例子

#主滑块{
宽度：100%；
高度：528px；
/*边界半径：0%0%50%50%/0%0%20%20%*/
边框右下半径：50%25%；
边框左下半径：50%25%；
位置：相对位置；
}
.徽章{
背景色：#fff；
边界半径：30px；
盒影：0 15px 35px 0 rgba（42,51,83,12），0 5px 15px rgba（0,0,0,06）；
宽度：17%；
位置：绝对位置；
}
.文本{
填充：0.5雷姆0.25雷姆0.5雷姆1雷姆；
}
.链接{
边界半径：继承；
显示：内联块；
背景色：红色；
填充：0.5雷姆1雷姆；
颜色：#F9F9EC；
宽度：57%；
}

联系我们
（555）1234567

您可以通过添加名为

.wrapper

的类，并使用

display:flex

和

justify content center

来执行此操作。您的

.badge

阅读有关flex的更多信息

运行下面的代码段

#主滑块{
宽度：100%；
高度：528px；
/*边界半径：0%0%50%50%/0%0%20%20%*/
边框右下半径：50%25%；
边框左下半径：50%25%；
位置：相对位置；
}
.徽章{
背景色：#fff；
边界半径：30px；
盒影：0 15px 35px 0 rgba（42,51,83,12），0 5px 15px rgba（0,0,0,06）；
位置：绝对位置；
边缘顶部：0.5em；
}
.text{}
.链接{
边界半径：继承；
显示：内联块；
背景色：红色；
填充：0.5雷姆1雷姆；
颜色：#F9F9EC；
}
.包装纸{
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}

联系我们
（555）1234567