CSS定位(position)

相对定位(relative)

当对一个元素设置相对定位之后，便可以设定属性值来调整该元素在四个方向的偏移量。

代码如下：

<style>
    div{
        width: 500px;
        height: 500px;
        background-color: yellow;
        position: relative;
        top:200px;
        left: 200px;
    }

</style>
<body>
    <div>

    </div>
</body>

使用position: relative来设置相对定位属性。

上图中定义了

top:200px;
left: 200px;

分别代表向下偏移200像素，向右偏移200像素。

以下是属性表

属性(单位为px)	属性描述
top	向下偏移
bottom	向上偏移
left	向右偏移
right	向左偏移

相对定位虽然视觉上移动了元素的位置，但元素原本在文档流中的位置并未改变。

绝对定位(absolute)

首先绝对定位是脱离了标准文档流的，它跟相对定位的区别在于它们的属性值不同了。

属性(单位为px)	属性描述
top	与父级元素上方的距离
bottom	与父级元素下方的距离
left	与父级元素左方的距离
right	与父级元素右方的距离

代码示例：

<style>
    .relat{
        width: 500px;
        height: 500px;
        background-color: yellow;
        position: absolute;
        bottom: 200px;
        right: 200px;
    }

    .absolu{
        width: 200px;
        height: 200px;
        background-color: green;
        position:absolute;
        bottom: 70px;


    }

</style>
<body>
<div class="relat">
    <div class="absolu">

    </div>
</div>

</body>

可以看到属性值是各个方向的距离，并且是以父元素为基准。

固定定位(fixed)

固定定位也脱离了标准文档流，它的应用场景一般是导航栏或者工具栏，随着页面的拖动它的位置并不会变动。

示例代码：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        font-size: 50px;
        text-align: center;
        background-color: aliceblue;  
        top: 0 ;
        position: fixed;  /* 固定定位 */
        width: 100%;
        height: 103px;
        border-bottom: 4px solid red;
    }
    
    .div1{
        height: 300px;
        background-color: blue;
        

    }
    .div2{
        height: 300px;
        background-color: red;
    }
    .div3{
        height: 300px;
        background-color: green;
    }
</style>
<body>
    <div class="box">
        导航栏
    </div>

    <div class="div1">

    </div>

    <div class="div2">

    </div>

    <div class="div3">

    </div>

    <div class="div1">

    </div>

    <div class="div2">

    </div>

    <div class="div3">

    </div>
</body>

属性值使用同绝对定位。