z-index

层叠上下文的创建
 
①. 根层叠上下文  <html>
②. 定位元素
    1.position:relative/position:absolute   且 z-index 为具体值    
          2.position:fixed 且  z-index值不是auto FireFox/IE浏览器
          3.position:fixed （chrome）
③. CSS3与新时代的层叠上下文
  1. z-index值不为auto的flex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.
 
 
层叠上下文元素有如下特性：
  • 层叠上下文的层叠水平要比普通元素高
  • 层叠上下文可以嵌套
  • 每个层叠上下文和兄弟元素是独立的。
  • 每个层叠上下文是自成体系的，层叠顺序只和父元素有关。
 
 
比较原则(顺序)：
     1.判断是否含有堆叠上下文
     2.父元素的堆叠层级
     3.自身层级的比较
 
比较依据：
     0.层叠上下文的层叠水平要比普通元素高
     1., 在同一个层叠上下文领域 ,z-index 谁大谁上
     2.后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
 
 
附加：
     1.上层元素会遮蔽下层元素的交互事件
     2.z-index:auto可看成z:index:0级别的层级；
 
 
层叠顺序：

在每个堆叠上下文中，下列层按从后向前的顺序绘制：

  1. 元素的background和border生成的堆叠上下文
  2. 堆叠层级为负数的子级堆叠上下文（最负的优先）
  3. 流内的，非内联级，未定位的（non-positioned ）后代
  4. 未定位的浮动（元素）
  5. 流内的，内联级，未定位的后代，包括inline table和inline block
  6. 堆叠层级为0的子级堆叠上下文，以及堆叠层级为0的定位的后代
  7. 堆叠层级为正数的子级堆叠上下文（最小的优先）
 
 

 

 
 
 
 
 
 
posted @ 2016-09-04 16:46  阿巴阿巴55996  阅读(148)  评论(0)    收藏  举报