CSS标准流、浮动、定位————定位

---

前言

CSS 有两个最重要的基本属性，前端开发必须掌握：display和position。

---

一、CSS定位用来解决什么问题？

• 自由位置盒子的摆放
• 网页中拖拉不变位置的盒子
• 可以盖住遮挡其他盒子的盒子

二、CSS定位模式

1.静态定位（static）

（具有标准流特性 几乎相当于无定位 ）
代码如下：

        .box{
            position: static;
        }

2.相对定位（relative）

特点：

1. 以原来的位置为基准移动
2. 原来位置仍然保留，不会被其他盒子占用

未添加相对定位前的代码以及效果图：

        .box1 {
            width: 400px;
            height: 400px;
            margin: auto;
            background-color: aquamarine;
        }
        .box2{
            width: 200px;
            height: 200px;
        }

进行相对定位后的代码以及效果：

        .box1 {
            width: 400px;
            height: 400px;
            margin: auto;
            background-color: aquamarine;
        }

        .box2 {
            position: relative;
            left: 20px;
            top: 20px;
            width: 200px;
            height: 200px;
            background-color: bisque;
        }

此时box2的上方和左方有20px的间距

此时若有第三个盒子，第三个盒子的位置不会被占，因为相对定位的位置仍然保留。
示意图如下：

3.绝对定位（absolute）

特点：

1. 以最近以及的父元素为基准
2. 没有父元素或者父元素没有定位，以浏览器为基准。
3. 绝对定位不再占有原先的元素

        .box1 {
           width: 400px;
           height: 400px;
           margin: auto;
           background-color: aquamarine;
       }

       .box2 {
           position: absolute;
           left: 20px;
           top: 20px;
           width: 200px;
           height: 200px;
           background-color: bisque;
       }

此时父元素box1没有定位，box2以浏览器边缘为基准进行定位，如图

若其父元素没有定位，父元素的父元素有定位，则按照最近一级的有定位的父元素为基准,并且其一旦添加相对定位，则其位置会被侵占。如图。

4.固定定位（fixed）

1.以浏览器可视图为基准点
2.与父元素无关
3.不占用原先位置

       .box2 {
           position: fixed;
           right: 5px;
           width: 200px;
           height: 200px;
           background-color: cornflowerblue;
       }

       body {
           height: 5000px;
           background-color: blueviolet;
       }

如图

利用固定定位可以实现 例如页面两侧的广告，购物车按钮，搜索按钮等功能。

总结

定位中有一种使用非常多的技巧：子绝父相；
子元素使用绝对定位，可以使子元素在父元素中的位置可变，并且不再占有原先的位置；父元素使用相对定位，可以使父元素在整个布局中的位置不被占有，保持页面的整体性，即：可以实现在一定约束下的自由。