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: 10
div #2
position: relative;
z-index: 20
div #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: 20
div #2
position: relative;
z-index: 0
div #3
position: absolute;
z-index: 30
div #4
position: relative;
z-index: 30
div #5
position: relative;
z-index: 10
div #6
position: absolute;
z-index: 0
还有更多…
仅定位的元素会创建堆叠上下文吗?并不是的。在其他场景中,元素可以创建一个。透明度小于1(或)的元素(如transform,filter)可以创建堆叠上下文。但是,不用担心。它们的行为与定位元素的行为相同。
还有其他关于z索引的问题吗?您一直在苦苦挣扎的其他概念吗?给我写一条推文,我会尽快回复你。