相对定位

定位，定位是一个更加高级的布局手段，通过定位可以将原始摆放到任意位置

 

position

可选值：
static（默认值）,静止的没有开启定位

relative　　相对定位

absolute　　 绝对定位

fixed　　开启元素的固定定位

sticky　　 开启元素的粘滞定位

 

相对定位的特点：

1.不设置偏移量，元素没动（偏移量offset：可以改变元素的位置，不影响别人）

偏移量：top,bottom,left,right

top，定位元素和定位位置上边的距离，参照物是原来的元素位置

top,bottom可以控制垂直方向，通常使用一个，top值越大，元素越向下。（right和left也类似）

2.相对定位是相对于文档流中的位置来进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.不会改变元素的性质，块还是块，行内还是行内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .box1,.box2,.box3
    {
        width: 100px;
        height: 100px;

    }
    .box1
    {
        background-color: aqua;
    }
    .box2
    {
        background-color: rgb(206, 31, 31);
        position: relative;
        top: -100px;
        left: 100px;
    }
    .box3
    {
        background-color: chartreuse;
    }
</style>
</head>
<body>
    <div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

 

posted @ 2021-02-19 21:23  俗气小博  阅读(487)  评论(0)    收藏  举报