<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>z-index</title>
</head>
<body>
<script>
let a = `要想理解 z-index ，必须先了解三个概念，分别是层叠上下文、层叠等级、层叠顺序`;
let b = `层叠上下文是html中的一个三维概念，在css2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴和y轴，以及表示层叠的z轴；一般情况下，元素在x轴y轴平铺，察觉不到在z轴的层叠关系
如果一个元素含有层叠上下文，可以理解在z轴上高人一等，最终表现是离屏幕观察者更近`;
let c = `层叠等级：描述的是在同一层叠上下文中，层叠上下文元素在z轴的上下顺序。如果没有层叠上下文，则描述普通元素在z轴的上下顺序。不同层叠上下文的元素无法比较；`;
let d = `如何产生层叠上下文`;
let e = `html的根元素本身就有层叠上下文，称为根层叠上下文；普通元素设置position属性为非static值并设置z-index属性为具体值时，产生层叠上下文；css3新属性也会产生层叠上下文`;
let f = `层叠顺序：表示元素发生层叠时按照特定的顺序规则在z轴上的垂直显示。`;
let g = `层叠上下文的background/border 《 z-index<0 《 block块级盒子 《 float浮动盒子 《 inline/inline-block 水平盒子 《 z-index:0/z-index:auto 《 z-index:>0`;
let h = `先大后小，先判断层叠上下文，后判断是否普通元素，后层叠等级，按照层叠规则比较`;
</script>
<script>
let link = `https://blog.csdn.net/chern1992/article/details/107073184/`;
</script>
</body>
</html>
标签：index,顺序,层叠,元素,let,上下文 来源： https://www.cnblogs.com/pengxiangchong/p/16189599.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。