美文网首页让前端飞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
}
/* 此方法我测试过 位移的伪元素显示在了父元素之下,而且并不会显示在 爷爷辈的元素之下。 */

相关文章

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

    伪元素默认层级是在父元素之上的,同时 ::after在::before之上伪元素方法1:z-index = -1 ...

  • 背景设置与表格

    1z-index 开启定位以后。z-index:1;数越大层级越高。 层级z轴。父元素层级比子元素高,但是父元素也...

  • 背景设置与表格

    1z-index 开启定位以后。z-index:1;数越大层级越高。 层级z轴。父元素层级比子元素高,但是父元素也...

  • 常见的清除浮动的方法

    父级元素添加伪元素 在与浮动元素平级的最后面添加新元素 div.clear 在父级元素添加样式 overflow:...

  • 玩转jQuery 1day

    选择器 1.元素选择 2层级选择 4.伪类选择器 过滤器 $().parent()父级元素 filter() 方法...

  • 元素层级和背景

    元素的层级 z-index 设立层级 没有开启,是不能使用z-index 子元素层级再高也永远盖不住父元素 元素的...

  • 元素层级 背景 表格

    元素的层级 z-index 父元素层级在高,也不会盖住它的子元素 对于没有开启定位的元素不能使用z-index 如...

  • CSS清除浮动

    1、在浮动元素下方加一个空标签clear:both 2、在浮动元素父元素上定义伪类:after 3、给浮动元素父元...

  • javascript 伪元素的点击事件

    伪元素的点击事件 1.父元素 使用 ‘pointer-events: none;’ 伪元素使用‘pointer-e...

  • 知识点 2018-07-11表格样式

    元素的层级; 设置元素的层级:z-index:值(数字);必须先开定位才能使用。 父元素的层级设置的再高也不会覆盖...

网友评论

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

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