【CSS】实现伪元素层级在父元素之下

问题描述

伪元素默认层级是在父元素之上的,同时 ::after在::before之上,若要实现伪元素层级在父元素之下,则可通过以下方式实现

1. 方法一:使用z-index

设置层级为负数,则该元素便位于最下层,但是此方法有一个问题,就是如果还要它在其他元素的上层,则还需要调整其他元素的层级,如果元素嵌套很多,则需要设置一连串的z-index

2. 方法二: 3D转换

css 复制代码
.parent {
    transform-style: preserve-3d;
}
.parent::before{
    transform: translateZ(-1px) // Z轴方向位移-1px
}
相关推荐
归于尽15 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟16 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦16 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子17 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c21 分钟前
常见请求头响应头的含义
前端·面试
wzyoung21 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户730870117930821 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥22 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一23 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码23 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端