美文网首页让前端飞Web前端之路
让伪元素层级在父元素之下

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

作者: 小光啊小光 | 来源:发表于2020-06-15 16:47 被阅读0次

    伪元素默认层级是在父元素之上的,同时 ::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
    }
    /* 此方法我测试过 位移的伪元素显示在了父元素之下,而且并不会显示在 爷爷辈的元素之下。 */
    

    相关文章

      网友评论

        本文标题:让伪元素层级在父元素之下

        本文链接:https://www.haomeiwen.com/subject/iilhxktx.html