• z-index


    z-index

    这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。

    • z-index 值表示谁压着谁,数值大的压盖住数值小的,
    • 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
    • z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
    • 从父现象:父亲怂了,儿子再牛逼也没用

    z-inde 就是改变两个 正在覆盖的图片的显示,可以让他们的显示的先后顺序进行改变,谁的z-index的值大就显示谁的,子级别的z-index不会改变父级的显示 但是父级会改变子级的

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            .lzy{
                width: 300px;
                height: 300px;
                background-color: black;
                position: absolute;
                z-index: 1;
            }
            .tl{
                width: 300px;
                height: 300px;
                background-color: yellow;
                position: absolute;
                z-index: 11;/*谁的级别大就显示谁的*/
    
            }
            /*子级在牛逼也不会带动父级改变*/
            .kimi{
                width: 100px;
                height: 100px;
                background-color: green;
                position: absolute;
                top: 400px;
                left: 400px;
                z-index:30000;
            }
            .sd{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                top: 450px;
                left: 350px;
                z-index: 1000;
            }
    
    
        </style>
    </head>
    <body>
    
        <div class="lzy">
            <div class="kimi"></div>
        </div>
        <div class="tl">
            <div class="sd"></div>
        </div>
        
    </body>
  • 相关阅读:
    JQuery的摸索之路(一)
    C#操作excel(NPOI篇)
    Mschart学习(MSchart介绍)
    JQuery的摸索之路(二比较)
    Mschart学习(开篇)
    Mschart学习(官方demo共享)
    SQL进阶提升(疑惑篇order by)学习sql server2005 step by step(十一)
    一步一步学习C#(二C#基础)
    NickLee的学习
    Linux 命令学习一
  • 原文地址:https://www.cnblogs.com/zhaoyunlong/p/9092222.html
Copyright © 2020-2023  润新知