CSS中的固定布局和相对布局

在讲固定布局和相对布局之前先回顾一下流动布局、冻结布局以及绝对布局

---

流动布局，不在流中，但是浮动元素的边界会影响内联元素的流动，分左浮动和右浮动，注意要配合宽度width属性一起使用

---

冻结布局： body下弄个div容器，嵌套所有内容，然后给这个容器设定宽度和左右margin设置成auto

---

绝对布局： 不在流中，真的会被其它块元素完全忽视，注意其位置是相对于父元素而言

---

固定布局不在流中，会被其它元素完全忽视，与绝对布局不同的是其相对于窗口，因此不管你怎么拖拉浏览器的滚动条，固定布局元素始终会在屏幕的某个位置不动

            position: fixed;
            top: 300px;
            left: 120px;

下面是固定布局的一个demo截图（可以清楚看到固定布局不在流中）

---

---

---

---

相对布局依然在流中，只是在最终现实整个页面前，相对自己现在的位置向左或向右偏移一些像素

---

            position: relative;
            right: 120px;

下面是相对布局的demo截图（可以清楚看出相对布局元素依然还在流中）：

---

---

FR：海涛高软（QQ技术交流群：386476712）