您的位置: 首页  >  文章  >  深入理解之z-index属性（第四期）

深入理解之z-index属性（第四期）

分类: 文章 • 2024-01-08 08:48:22

一、z-index基础

  1. 支持负值（在日常的使用的层叠上下文里，-1，-2值足够使用）
  2. 支持css3animation动画。
  3. 如果不考虑css3只有 定位元素的index才有作用：position、relative、absolute、fixed。

二、相关特性

  1. 如果定位元素z-index没有发生嵌套。
  • 后来居上原则
  • 哪个值大哪个值就在上面
  1. 如果定位元素z-index发生了嵌套
  • 祖先优先原则
    例：虽然前面的z-index更大，但是需要追溯到祖先元素来比较，即：外层的div。两个div的z-index都是1，所以后来居上原则，第二个图片在上面。
<div style="position:relative;z-index:1;">
	<img style="position:absolute;z-index=2;"/>//前提:z-index是数值不是auto
</div>
<div style="position:relative;z-index:1;">
	<img style="position:absolute;z-index=1;"/> 
</div>

三、理解css中的层叠上下文和层叠水平

  1. 层叠上下文，是html元素中一个三维概念，表示元素在z轴上有了可以"高人一等的权利"（可以理解为：表示普通的老百姓htlm元素当官了有了等级）。
  • 页面的根元素天生是具有层叠上下的：“根层的叠上下文”（皇亲国戚）。
  • z-index的值为数值的定位元素有层叠上下文（科考入选）。
  • 其它属性。
  1. 层叠水平：层叠上下文中的每个元素都有层叠水平，决定了捅一个层叠上下文元素在Z轴上的显示顺序，遵循“后来居上”和"谁大谁在上"的准则（当官的家人论资排辈）。
  2. 特征如下
  • 层叠上下文可以嵌套，组成一个分成的层叠上下文
  • 每个层叠上下文和兄弟元素可以独立：当进行层叠化渲染的时候只需要考虑后代元素。
  • 每个层叠上下文是只成体系的：当元素的内容被层叠否，整个元素被认为是在父成的层叠顺序中（子元素发生了层叠变动不会影响到父元素的情况）。

四、理解元素的层叠顺序

深入理解之z-index属性（第四期）

五、z-index与层叠上下文

  1. 定位元素默认z-index：auto;可以看成z-index：0;。
  2. z-index不为auto的定位元素会创建层叠上下文。
  3. z-index层叠顺序的比较止步于父级层叠上下文。

六、css与层叠上下文的属性

  1. z-index不为auto的flex项（父元素display:flex/inline-flex）。
  2. 元素的opacity的值不为1.
  3. transition的值不为none。
  4. mix-blend-mode值不为normall。
  5. filter的值不为none。
  6. position:fixed声明存在。
  7. will-change指定的属性值为上面任意一个。
  8. overflow-scrolling为touch。

七、z-index与其它css属性层叠上下文

  1. 不支持z-index的层叠上下文元素的层叠顺序均是z-index：auto；
  2. 依赖z-index的层叠上下文元素的层叠顺序取决于z-index的值。

后排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。

相关推荐