Css查漏补缺08-相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: #605ca8;
        }
        .box2{
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .box3{
            background-color: #bfa;
        }
        .span1{
            width: 100px;
            height: 100px;
            background-color: #ffff22;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<!--Emmet-->
<!--div.box.box${box$}*3-->

<!--
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
-->

<!--
相对定位的特点
1、就是我们只设置position: relative;之后，元素时不会动的，我们必须通过left right top bottom四个属性来设置偏移才能使它动
2、相对定位不会脱离文档流
3、相对定位是相对于它原来的位置（它原来在文档流中的位置）进行定位
4、相对定位会提升元素的一个层级，所以会比其它在文档流中的元素要高
5、相对定位不仅可以作用于块级元素，内联元素也可以，相对定位因为没有脱离文档流，所以不能够改变盒子的属性，也就是块状元素还是块状，内联元素还是内联，下一节课里面的绝对定位会改变盒子的性质
-->

<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<span class="span1">span1</span>
</body>
</html>
Css查漏补缺08-相对定位

猜你喜欢
