z-index

作者: 戴西西的染坊 | 来源:发表于2018-01-18 23:50 被阅读0次

  • 平面图形x轴、y轴,三维有z轴,盒模型处于三维时自然也有三维,故此z-index就是z轴坐标,值越大,“离你越近”,有z轴自然需要“脱离文档流”了。

问题:

  1. z-index 在什么情况下才生效?
    • 只有在元素的position属性的值不为static生效,flex盒子也可以设置此属性
  2. z-index值越大元素越靠前,对吗?
    • z-index大的会覆盖值小的。但是若父元素z-index使用了数字的值将会创建一个层叠上下文,那么此时子元素只会与父元素内的子元素进行z-index比较,不与外部元素比较。
  3. z-index 不设置和设置为0有什么区别?
    • 有区别,不设置默认为auto不会创建层叠上下文。
  4. z-index 可以为负值吗?
    • 可以为负值,降低z轴的值,可以理解为“远离”
  5. z-index 在设置元素覆盖时到底有什么规律?
    • 同级元素z轴值大,覆盖值低的
    • z-index值相同,html结构靠后的覆盖前面的
    • 创建了层叠上下文的父元素内的子元素互相比较

相关文章

  • 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属性

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

  • z-index属性的理解

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

  • CSS深入理解之z-index 笔记

    z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...

  • z-index 须知

    z-index 需要先加入 position:absolute/relative 定位 可参考z-index

  • 搞懂Z-index的所有细节

    Z-index测试网站 一 z-index 在什么情况下才生效? Z-index的运用是需要条件的,与其相关的属性...

  • z-index part3

    不支持z-index的层叠上下文元素的层叠顺序均是z-index: auto级别 依赖z-index的层叠上下文元...

  • 堆叠顺序

    元素堆叠顺序简图 background border 块级 浮动 内联 z-index: 0 z-index: +...

  • 不能返回顶部了

    这个回到顶部的层的z-index要大于上面这个层的z-index

网友评论

      本文标题:z-index

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