CSS定位总结

CSS的position主要有以下几个属性：static,relative,absolute,fixed,CSS3又增加了center | page | sticky，三个属性。对于css3大多数浏览器也都还不支持，也没怎么用到就不说了。至于position的了解，个人觉得首先应该先了解一下什么是块级元素，内联元素，以及内联块元素，然后再开始了解position属性在页面布局中的应用，以及影响。

三种元素类型的特点：

块级元素：在页面中独占一行，可以设置元素的高度，宽度
内联元素：不独占一行，多个内联元素可以在同一行中，直到这一行的的宽度无法继续容下内联元素位置。不能设置元素的宽度，高度。
内联块：介于以上两者之间，在内联元素的特性上改变了可以设置元素的快读与高度。

Position属性：

Static：默认属性，按标准文档流布局，（标准文档流布局方式，从上到下，从左到右，结合元素的特性，块级元素？内联元素？等一行行的从上到下渐渐占位，每行之内又是从左到右逐渐占位）
Relative：设置该属性的元素，依旧占据着其原本在标准文档流中的位置，但可以通过top,left等属性进行位置的偏移,偏移的位置是相对于元素原本在标准文档流中所占的位置而言
Absolute:设置该属性的元素脱离了标准文档流，即在标准文档流中不占位，其位置是相对于其第一个设置了position属性的祖先而言（static这个默认属性除外，即设置为static属性也视为没有设置），同时需要注意的是，如果设置了absolute属性的元素，没有设置top，left等属性，此时的元素虽然脱离了文档流但是其位置却是在其父元素的左上角，而不是在设置了position属性的祖先元素的左上角，当时有top，left等属性的时候，变成了先对与第一个设置了position属性的祖先元素的的先对位置，可以自己稍微用html文档演示一下：以下有个截图

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    .box1{
        height: 500px;
        width: 500px;
        background-color: #fff;
        border: solid 1px #ccc;
        position: relative;
    }
    .box2{
        height: 200px;
        width: 200px;
        margin-top: 50px;
        margin-left: 50px;
        background-color: blue; 

    }
    .box3{  
        height: 100px;  
        width: 100px;   
        background-color: #ccc;
        position: absolute;
        top: 0;
    }
    .box4{
        height: 100px;  
        width: 100px;   
        background-color: yellow;
        /*position: absolute;*/
        /*top: 0;*/
        /*float: right;*/
    }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
    </div>
</body>
</html>