css伪元素层级在父元素之下

最新推荐文章于 2024-07-04 17:39:05 发布

大东哦哦

最新推荐文章于 2024-07-04 17:39:05 发布

阅读量2.5k

点赞数 8

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

本文链接：https://blog.csdn.net/qq_36454089/article/details/107514295

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目标:把心和点状图放在盒子下面,位置不变

写页面时，有些装饰性元素在内容盒子下面，

通常是给内容盒子再包裹一层父盒子，把层级小于内容盒子的装饰元素定位上去

这样写很麻烦,结构上还多了一层的盒子,不利于代码维护

解决 : 可以使用z轴的3d转换更换伪元素(子元素)的层级

 .father {
   /* 让子元素 呈现3D转换 */
   transform-style: preserve-3d;
 }

 .son {
   /* 使用Z轴进行3D 转换  */
   transform: translateZ(-1px);
 }

最终改变层级,让子元素的层级在父元素下面

完成代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素层级</title>
  <style>
    .box {
      width: 300px;
      height: 400px;
      border-radius: 20px;
      border: 5px solid #24378d;
      margin: 100px auto;
      position: relative;
      background: #fff;

      /* 让子元素 呈现3D转换 */
      transform-style: preserve-3d;
    }

    /* css伪元素层级在父元素之下 */
    .box:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 25px;
      left: 25px;
      background: url('./images/box-bg.png') no-repeat;
      background-size: 100% 100%;

      /* 使用Z轴进行3D 转换  */
      transform: translateZ(-1px);
    }

    .box:before {
      content: '';
      width: 141px;
      height: 97px;
      position: absolute;
      top: -62px;
      left: -57px;
      background: url('./images/heart2.png') no-repeat;
      background-size: 100% 100%;
      transform: translateZ(-1px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>