文章目录

绝对定位

Html第14集：绝对定位_javascript

举例

<head>

    <style>
    
        .box1 {
            width: 100px;
            height: 100px;
            background-color: tomato;
        }

        .box2 {
            width: 120px;
            height: 100px;
            background-color: #bfa;
        }

    </style>

</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>

</body>

Html第14集：绝对定位_html_02


开启绝对布局

<head>

    <style>
    
        .box1 {
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
        }

        .box2 {
            width: 120px;
            height: 100px;
            background-color: #bfa;
        }

    </style>

</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>

</body>

Html第14集：绝对定位_javascript_03

可以看到 box1 开启绝对定位后，box1 脱离文档流，box1 提升层级。box2 向上顶，移动到 box1 的位置。