admin 管理员组

文章数量: 887032

z

网上对这一方面解释的很多，我也不想把别人的抄过来。在这里是加上我对这些情况的理解还有我的一些疑惑，若有问题，请留言，谢谢！！！话不多说，进入正题：

文章重点：z-index失效的一类情况：父标签position属性为relative的时候,详解

声明：为了叙述方便，本文将用类名代替相应的元素

首先 z-index在何种情况下生效呢？

  • （1）简单定义：通常 z-index 的使用是在有两个重叠的标签，在一定的情况下，控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。

  • （2）Z-index 仅能在定位元素上奏效（也就是说要有position属性，再详细的说，它的值需要是relative、absolute、fixed）

    • 补充：它的值也可以写成inherit，只要它的结果能是上边的三种也可以。不能是static，因为这个是默认值，相当于没有定位

  • （3）下面将详细的介绍

    • 第一种情况（position:absolute）
    • 测试定位为absolute（num01）的情况
    • 例一

    CSS代码
    .public{
    width: 100px;height: 100px;
    transform: translate(50px,50px); /* 移动到坐标(50,50) */
    color: white;
    }
    .num01{
    position: absolute;
    background-color: black;
    }
    .num02{
    background-color: red;
    }

    HTML代码

    • 结果（这是正常情况下的结果）
    • 例二
    • 当给第一个添加z-index后，效果如下

    CSS代码
    .num01{
    position: absolute;
    background-color: black;
    z-index: 10;/新添加的/
    }

    • 结果

  • 第二种情况（position:relative）

    • 测试定位为relative（num02）的情况
    • 上边我们已经可以知道，当给num01设置的z-index：10，num01就会出现最上层。这里我们给num02设置z-index：100，看有什么变化。

    CSS代码
    . public{
    width: 100px;height: 100px;
    transform: translate(50px,50px); /* 移动到坐标(50,50) */
    color: white;
    }
    .num01{
    position: absolute;
    background-color: black;
    z-index: 10;
    }
    .num02{
    background-color: red;
    z-index:100;
    }

    HTML代码

    • 结果
    • 哎呀，为什么没变呢，它怎么就不变呢？
    • 嘿嘿，没变是因为我们没有给num02设置定位呀，找到问题啦，那就解决它呗

    CSS代码
    .num02{
    position: relative;//添加的定位
    background-color: red;
    z-index:100;
    }

    • 结果

    • 嘿嘿嘿，这不就戳来了

    • 第三种情况（position:relative）
    • 测试定位为static（num02）的情况

    CSS代码
    .num02{
    position: static;
    background-color: red;
    z-index:100
    }

    HTML代码

    • 结果

    • 总结：可以看出，当为static时，num02上的z-index是无效的

    • 第四种情况（position:relative）
    • 测试定位为inherit（num02）的情况
    • 例一

    CSS代码
    .father{
    width: 100px;height: 100px;
    transform: translate(50px,50px);/* 移动到坐标(50,50) /*
    color: white;
    position: relative;
    }
    .public{width: inherit;height: inherit;}
    .num01{
    position: absolute;
    background-color: black;
    z-index: 10;
    }
    .num02{
    position: inherit;
    background-color: red;
    z-index:100; /* 修改的位置在这里*/
    }

    HTML代码

    • 结果
    • 例二

    CSS代码
    .father{
    width: 100px;height: 100px;
    transform: translate(50px,50px); /移动到坐标(50,50） /
    color: white;
    position: relative;
    }
    .public{width: inherit;height: inherit;}
    .num01{
    position: absolute;
    background-color: black;
    z-index: 10;
    }
    .num02{
    position: inherit;
    background-color: red;
    z-index:9; /* 修改的位置在这里 */
    }

    • 结果
    • 总结：只要inherit的值还是上边的哪三种，那么inherit也可以被用来使用

我在这里说下我的一个困惑，我在网上搜索

  • （1）基本都包括了一点：父标签position属性为relative的时候，那么z-index失效 。
    • 我对这句话的理解是：当一个子元素的父元素position属性为relative的时候，那么该子元素的z-index就失效了。但是，重点来了，如果我的理解没有错（我反正很心虚），那么就是这句话存在问题，你可以看看我上边关于属性值为inherit部分，他们的父元素的position属性为relative，但是，z-index没有失效啊。
    • 我的理解可能有所错误，欢迎留言指正，咱们一起进步

z-index的补充

  • （1）父标签position属性为relative的时候，那么z-index失效 。这句话应该还有另一层理解的方式。就像下边这样，（暂且称为多父子模式）

    HTML代码

    CSS代码
    .father,
    .fatherTwo{
    width: 100px;height: 100px;
    color: white;
    position: relative;
    }
    .father{z-index: 1;}
    .fatherTwo{z-index: 2;}/z-index:(x>=1)结果都如下/
    .public{width: inherit;height: inherit;}
    .num01{
    position: absolute;
    background-color: black;
    margin-top: 50px;
    z-index: 1000;
    }
    .num02{
    position: inherit;
    background-color: red;
    z-index:100;
    }

    • 结果
    • 总结：当不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染，与子元素的z-index值没有关系，这个才应该是上边这句话的本意吧（敲黑板）

文章到此就结束了，若有问题请欢迎留言，如果觉得对你有所帮助，请点赞支持，谢谢

本文标签： z

版权声明：本文标题：z 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687157998h70569.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。