zoukankan      html  css  js  c++  java
  • 你不知道的z-index

    关于z-inde 
     w3c描述 (z-index )

    每个元素都具有三维空间位置,除了水平和垂直位置外,还能在 “Z轴” 上层层相叠、排列。元素在 “Z轴” 方向上的呈现顺序,由层叠上下文和层叠级别决定。

    在文档中,每个元素仅属于一个层叠上下文。元素的层叠级别为整型,它描述了在相同层叠上下文中元素在 “Z轴” 上的呈现顺序。

    同一层叠上下文中,层叠级别大的显示在上,层叠级别小的显示在下,相同层叠级别时,遵循后来居上的原则,即其在HTML文档中的顺序。

    不同层叠上下文中,元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序,与自身的层叠级别无关

    理解: 
      层叠上下文可理解为一摞书的每一本书,层叠级别为每一本书的每一页,越上面越容易被看到 
    注意

      • z-index为层叠级别。 只有设置定位(static除外)才可以设置z-index
      • postion:fixed会创建新的层叠上下文
      • opacity小于1时,会创建新的层叠上下文
      • 同处一个层叠上下文,且为设置层叠级别时,遵从‘后来居上’原则
  • 相关阅读:
    42-蓄水池
    11-盛水最多的容器
    老虎-删除排序链表中的重复节点
    72-编辑距离
    53-3-数组中数值和下标相等的元素
    53-2-0~n-1中缺失的数字
    53-1-在排序数组中查找数字
    52-两个链表的第一个公共节点
    51-数组中的逆序对
    I/O相关
  • 原文地址:https://www.cnblogs.com/sunweinan/p/z-index.html
Copyright © 2011-2022 走看看