4：--2相对定位

来源：互联网发布：淘宝中药材编辑：程序博客网时间：2024/06/05 19:11

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>

***相应效果

阅读全文

0 0