美文网首页
z-index用法总结

z-index用法总结

作者: 王阿王 | 来源:发表于2017-05-03 00:20 被阅读0次

一、定义:

z-index 只适用于元素有定位的情况,表示层级 数值越大 层级越高 展示的位置越靠前。

二、用法:

1、同级关系:

z-index值较大的元素将叠加在z-index值较小的元素之上 (值可以为负数)

z-index值相同时 按照文档流顺序排列

2、父子关系:

如果设置了父元素的z-index,那么子元素无论是否设置z-index都和父元素一致,会在父元素上方

3、同级元素下的子元素关系

同级元素的z-index生效,那么其子元素覆盖关系由父元素决定,

(父元素z-index值大的覆盖父元素z-index值小的 子元素在各自父元素的上方)

相关文章

  • z-index用法总结

    一、定义: z-index 只适用于元素有定位的情况,表示层级 数值越大 层级越高 展示的位置越靠前。 二、用法:...

  • z-index问题

    所有主流浏览器都支持 z-index 属性。 定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序...

  • z-index用法

    再次看z-index,发现z-index其实有一些禁忌和注意事项; z-index只对定位元素有效; 在两个元素重...

  • z-index的用法

    转载于(http://www.cnblogs.com/ForEvErNoME/p/3373641.html)CSS...

  • z-index学习

    title: z-indexdate: 2017-05-16 z-index z-index z-index 概念...

  • z-index的理解

    第一节:z-index基础 较大的z-index会覆盖较小的那个z-index元素 z-index:auto 默认...

  • z-index的用法及失效

    z-index:用于提升元素层级默认值为0 图中DIV1有1和2两个子元素,DIV2有3和4两个子元素。 最终呈现...

  • IOS学习(14)-UISlider

    IOS UISlider用法总结

  • z-index属性

    number z-index:3; 按照z-index的大小排序

  • z-index属性的理解

    简单介绍z-index 什么是z-index? z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是...

网友评论

      本文标题:z-index用法总结

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