html-css-js
/
10CSS定位.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 CSS 定位</title>
    <style>
        .box1{
            height: 350px;
            background-color: aqua;
        }

        .box-normal{
            width: 100px;
            height: 100px;
            background-color: purple;
        }

        .box-relative{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative; /* 相对定位 */
            left: 120px;
            top:40px;
        }

        .box2{
            height: 350px;
            background-color: yellowgreen;
            margin-bottom: 200px;
        }

        .box-absolute{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            position: absolute; /* 相对定位 */
            left: 120px;
        }

        .box-fixed{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed; /* 固定定位 */
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>10 CSS 定位</h1>
    <h2>1.相对定位</h2>
    <div class="box1">
        <div class="box-normal">正常1</div>
        <div class="box-relative">1相对</div>
        <div class="box-normal">正常2</div>
    </div>

    <h2>2.绝对定位</h2>
    <div class="box2">
        <div class="box-normal">正常3</div>
        <div class="box-absolute">2绝对</div>
        <div class="box-normal">正常4</div>
    </div>

    <h2>3.固定定位</h2>
    <div class="box-fixed">3固定
    </div>
</body>
</html>