开发者社区> 问答> 正文

关于z-index的疑问

示例中得效果是所期望的:.box元素在最上层显示,伪元素被遮挡在后面。效果是通过为伪元素的z-index设为负值实现的,但是当为.box添加一个z-indx属性时,它就会跑到最底层,而且把伪元素的z-index·设为正值,.box的z-index·设为更大的值也无法达到相同效果,Why?

展开
收起
杨冬芳 2016-06-03 19:13:50 1977 0
1 条回答
写回答
取消 提交回答
  • IT从业

    1,当使用position和z-index之后会创建新的stacking context结构
    2,创建stacking context之后,内部的元素的从后向前的创建顺序如下:

    Within each stacking context, the following layers are painted in back-to-front order:
    
    1,the background and borders of the element forming the stacking context.
    2,the child stacking contexts with negative stack levels (most negative first).
    3,the in-flow, non-inline-level, non-positioned descendants.
    4,the non-positioned floats.
    5,the in-flow, inline-level, non-positioned descendants, including
    inline tables and inline blocks.
    6,the child stacking contexts with stack level 0 and the positioned
    descendants with stack level 0.
    7,the child stacking contexts with positive stack levels (least
    positive first).``
    

    3,当z-index不为auto时,创建新的stacking context,此时.box的border和background是属于1所描述的情况,所以始终是在最下面的
    4,当z-index不存在,此时不创建新的stacking context,此时.box的3这种情况。故当设置z-index小于0时,即前面的2,就可以使.box覆盖在伪元素之上啦

    2019-07-17 19:27:08
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
成功案例-Par...[幸运杰哥].1512720360.pdf 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载