HTM元素的 z-index
您是否总是发现z-index的概念很棘手？您是否将HTML元素的z-index值设置为99999，希望将其放置在页面中所有内容的前面，但仍然无法使用？如果您的回答是肯定的，那么您来对地方了。
下面，我将解释您需要了解的有关z-index的所有信息，并共享了一个漂亮的可视化工具，该工具将帮助您更改元素的z-index，使用拖放功能对其进行重新排序，并向您展示其中的更改。即时的。
定位和堆叠顺序
让我们快速介绍一下基础知识。任何HTML元素的默认位置值是static。默认值为static的任何元素都是非定位元素。
如果元素的位置值是以下值之一（相对，绝对，粘滞或固定），则它是已定位元素。
页面中的每个HTML元素都可以位于另一个元素之前（或之后）。这称为堆叠顺序。例如-弹出窗口位于其后面的内容之前。
让我们看看它的外观-
content （位置：相对）
pop-up #1 （位置：绝对）
pop-up #2 （位置：绝对）
HTML元素的Z-索引
如何确定已定位和未定位元素之间的堆叠顺序？这就是z-index帮助我们的地方。
- Z索引值为正的定位元素放置在未定位元素的前面。
- Z索引值为负的定位元素放置在未定位元素的后面。
甲z索引可以是包括零的任何正（或）负数。它对未定位的元素（static的位置值）没有影响。
z-index负责定位元素之间的堆叠顺序。
记下两个关键点：
- 固定值 -尽管您可以将任何数字用作z索引，但请尝试使用固定的z索引值集，例如-0、10、20、30、40。类似地，对于负值。这可以帮助您快速调试z-index问题。
- 排序 -如果两个元素具有相同的z-index，则它们在HTML中的顺序将确定哪个元素位于另一个元素的前面。
这里是有趣的部分。在下面的可视化工具中使用div元素。通过使用拖动手柄重新排列元素或更改z-index 来更改堆叠顺序。随时使用“ 重置”链接可恢复为默认配置。由于绝对定位元素已固定到其父元素，因此不会更改其位置。
重启
30
20
10
0
-10
相对的
30
20
10
0
-10
相对的
30
20
10
0
-10
绝对
div #1
position: relative;
z-index: 10div #2
position: relative;
z-index: 20div #3
position: absolute;
z-index: 30堆叠上下文
假设您有以下带有定位元素的HTML。
<body>
<div id='div1' style='position:relative; z-index:10' />
<div id='div2' style='position:relative; z-index:5'>
<div id='div3' style='position:absolute; z-index:100' />
</div>
</body>
将在DIV3元件被放置在前面DIV1元件，因为它具有较高的z索引？答案是不。乍一看似乎令人惊讶，但最终归结为HTML元素的分组方式。
请注意，div1是单个元素，并且形成一个一组。div2 组成一个组，其中div2作为父级，div3作为子级。定位的元素形成堆叠上下文。定位的元素可以是单个元素（或具有子元素的父元素）。
这是关键部分-儿童的z-index在其组外没有任何影响。div3的z-index仅在其同级中确定其在堆叠顺序中的位置，而在其组外则没有影响。这是什么原因，即使设置一个较大的值像99999至DIV3不会把它放在前面DIV1。
看下面的代码。此处，div3 和div4是同级，并且div3的 z索引较高，因此将放置在div4的前面。
<body>
<div id='div1' style='position:relative; z-index:10' />
<div id='div2' style='position:relative; z-index:5'>
<div id='div3' style='position:absolute; z-index:100' />
<div id='div4' style='position:absolute; z-index:50' />
</div>
</body>
堆叠上下文中的子元素的排序如下：
- Z索引值为负的定位元素
- 非定位元素-值为静态的元素
- 定位元素的z索引值为auto
- Z索引值为正的定位元素
玩下面的可视化工具，它具有多个元素和堆栈上下文。请注意，div4，div5和div6是div3的子级。
重启
30
20
10
0
-10
相对的
30
20
10
0
-10
相对的
30
20
10
0
-10
绝对
30
20
10
0
-10
相对的
30
20
10
0
-10
相对的
30
20
10
0
-10
绝对
div #1
position: relative;
z-index: 20div #2
position: relative;
z-index: 0div #3
position: absolute;
z-index: 30
div #4
position: relative;
z-index: 30div #5
position: relative;
z-index: 10div #6
position: absolute;
z-index: 0还有更多…
仅定位的元素会创建堆叠上下文吗？并不是的。在其他场景中，元素可以创建一个。透明度小于1（或）的元素（如transform，filter）可以创建堆叠上下文。但是，不用担心。它们的行为与定位元素的行为相同。
还有其他关于z索引的问题吗？您一直在苦苦挣扎的其他概念吗？给我写一条推文，我会尽快回复你。
