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

伪元素默认层级是在父元素之上的，同时 ::after在::before之上

伪元素方法1：z-index = -1

#parent{}

#parent::before{

   /* 省略... */

   z-index: -1

}

/* 此方法有一个问题，设置层级为负数，则该元素便位于最下层，

*  如若还要它在其他元素的上层则需要调整其他元素的层级，如果元素嵌套很多，

*  便需要设置一连串的z-index */

方法二： 3D转换

#parent{

       /*  */

   transform-style: preserve-3d;

}

#parent::before{

   /* 省略... */

   transform: translateZ(-1px) // Z轴方向位移-1px

}

/* 此方法我测试过 位移的伪元素显示在了父元素之下，而且并不会显示在 爷爷辈的元素之下。 */

本文章由javascript技术分享原创和收集