02-CSS基础与进阶-day9_2018-09-12-21-27-10

z-index
当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序 其值可以为0 正数 负数
特点 1 z-index默认值为0 取值越大 定位元素在层叠元素上越局上
2 z-index取值一样,后来居上
3 z-index值不能加单位
4 只有定位元素才有该属性,其余如浮动等都无此属性
元素的显示和隐藏
display: none; /* 隐藏元素 不是删除 只不过看不见 不保留位置*/
visibility: hidden;/*隐藏元素 它保留位置*/

05元素显示与隐藏.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 120px;
            height: 120px;
            background-color: red;
            margin-bottom: 10px;
        }

        div:nth-child(2) {
            /* display: none; */ /* 隐藏元素 不是删除 只不过看不见 不保留位置*/
            visibility: hidden;/*隐藏元素 它保留位置 visiable*/
        }

        div:last-child {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/HiJackykun/p/11072049.html