CSS—定位-CSDN博客

本文链接：https://blog.csdn.net/weixin_61466362/article/details/123779890

一、定位的叠放顺序

控制盒子的叠放顺序：

选择器 {
z-index: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的叠放顺序</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .one {
            background-color: aqua;
            z-index: 1;
        }
        .two {
            background-color: rgb(62, 32, 235);
            left: 50px;
            top: 50px;
        }
        .three {
            background-color: rgb(224, 22, 49);
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box one">one</div>
    <div class="box two">two</div>
    <div class="box three">three</div>
</body>
</html>

注意：

数值可以是正整数、负数或0，默认值是auto，数值越大盒子越靠上
如果属性值相同，则按书写顺序后来居上
数字后面不能加单位
只有定位的盒子才有这个属性

二、绝对定位居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位居中</title>
    <style>
        .box {
            position: absolute;
            /* 1.left 50% */
            left: 50%;
            /* margin负值往左盒子一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -50px;
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* margin: auto; */
            /* 绝对定位的盒子不能通过margin实现居中 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>