css 设置伪元素层级在父级下边

最新推荐文章于 2024-08-26 14:07:21 发布

G925010178

最新推荐文章于 2024-08-26 14:07:21 发布

阅读量9.6k

点赞数 8

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/G925010178/article/details/107847633

版权

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文探讨了在CSS中使用伪元素（before和after）创建十字线时，如何避免遮挡父级div内的子元素（如图片）。通过两种方法解决这一问题：一是调整伪元素的z-index属性；二是应用3D旋转效果使伪元素在Z轴上轻微后移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css伪元素，层级太高，挡住了父级子元素

父级div，伪元素before和after分别实现方框内的十字线。子集是一张图片，被伪元素遮挡住了。

在这里插入图片描述

<style>
#show_image{
   border: 1px solid rgba(0, 0, 0, 0.58);
    position:relative;
    width:100px;
    height:100px;
}
#show_image::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:1.5px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.58);
}
#show_image::after{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:1.5px;
    background-color: rgba(0, 0, 0, 0.58);
}
</style>
<div id="show_image" v-on:click="chooseImage()">
   <img style="width: 98px;height: 98px;;vertical-align:middle;" src="http://manage.jwta-iot.com/uploads/20200806/ae5f73cb0ababf08b1991a7f6ac96031.png">
</div>

解决办法一

伪元素添加 z-index: -1;（只能在定位元素上奏效）

<style>
#show_image::before{
	z-index: -1;
}
</style>

在这里插入图片描述

解决办法二

3D旋转效果（Z方向负向旋转，元素层级下降，Z方向垂直屏幕，X方向左右，Y方向上下）

<style>
 #show_image{
    transform-style: preserve-3d;	
}
#show_image::before{
    transform: translateZ(-1px);  
}
</style>