• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

使用可视化工具学习html元素的Z-Index

CSS/HTML rin, seun 1年前 (2020-06-16) 327次浏览 0个评论

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 来更改堆叠顺序。随时使用“ 重置”链接可恢复为默认配置。由于绝对定位元素已固定到其父元素,因此不会更改其位置。

重启

div#索引位置
1个
30
20
10
0
-10
相对的
2
30
20
10
0
-10
相对的
3
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仅在其同级中确定其在堆叠顺序中的位置,而在其组外则没有影响。这是什么原因,即使设置一个较大的值像99999DIV3不会把它放在前面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索引值为正的定位元素

玩下面的可视化工具,它具有多个元素和堆栈上下文。请注意,div4div5div6div3的子

重启

div#索引位置
1个
30
20
10
0
-10
相对的
2
30
20
10
0
-10
相对的
3
30
20
10
0
-10
绝对
4
30
20
10
0
-10
相对的
5
30
20
10
0
-10
相对的
6
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索引的问题吗?您一直在苦苦挣扎的其他概念吗?给我写一条推文,我会尽快回复你。

喜欢 (0)

您必须 登录 才能发表评论!