Html第14集：绝对定位

赵彦军

已于 2022-10-09 17:00:04 修改

阅读量177

点赞数

分类专栏：前端学习笔记文章标签： html 前端 javascript

于 2022-10-09 16:59:24 首次发布

本文链接：https://blog.csdn.net/zhaoyanjun6/article/details/127229909

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/127229909
本文出自【赵彦军的博客】

文章目录

绝对定位

绝对定位

在这里插入图片描述

举例

<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>

在这里插入图片描述
开启绝对布局

<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>