美文网首页
z-index失效的几种情况

z-index失效的几种情况

作者: 一枚小蜗牛 | 来源:发表于2017-03-04 16:14 被阅读0次

        注意点:

             (1):z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话,是不会有效果的.

              (2)同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用

    失效的情况:

    1、父标签 position属性为relative;

    2、问题标签无position属性(不包括static);

    3、问题标签含有浮动(float)属性。

    4、问题标签的祖先标签的z-index值比较小

    解决方法:

    第一种:  position:relative改为position:absolute;

    第二种:浮动元素添加position属性(如relative,absolute等);

    第三种:去除浮动。

    第四种:提高父标签的z-index值

    相关文章

      网友评论

          本文标题:z-index失效的几种情况

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