4：--2相对定位

最新推荐文章于 2022-03-29 11:25:09 发布

liu1992452008

最新推荐文章于 2022-03-29 11:25:09 发布

阅读量130

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/liu1992452008/article/details/75331831

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2.1 认识相对定位
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
 
 div {
            width: 200px;
            height: 200px;
        }
        
        .box1 {
            background-color: yellowgreen;
        }
        
        .box2 {
            background-color: skyblue;
            position: relative;
            top: 150px;
            left: 100px;
        }
        
        .box3 {
            background-color: orange;
       也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
  
  1 position:relative;   → 必须先声明，自己要相对定位了，
2 left:100px;       → 然后进行调整。
3 top:150px;       → 然后进行调整。
2.2 不脱标，老家留坑，形影分离
相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
它原本的位置会一直存在，不会被其他盒子占据。

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        
        .box1 {
            background: yellowgreen;
        }
        
        .box2 {
            background: skyblue;
            position: relative;
            top: 150px;
            left: 100px;
        }
        
        .box3 {
            background: orange;
        }
    </style>


</head>


<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>


</html>

***相应效果