CSS 定位机制

有了“框”的观念之后，现在才是正题哈~~接下来，我们聊聊什么是CSS 定位。所谓“定位“，就是说能将元素放在某个位置上。定位机制包括了普通流、浮动和定位，希望了解了这些之后会帮助你更好地理解之前的内容，以及掌握什么是定位。

1

普通流

普通流中框的位置就是按照在(X)HTML 文档中的先后次序依次显示，也就是一个萝卜一个坑，一个框一个位置。块级元素占一行或者多行，行内元素与其他元素共一行。

2

浮动

浮动，顾名思义就是能从原来的“坑”跳出来，从而能够改变其所在位置，一般是左右移动。当然，浮动的元素是不能溢出浏览器的外边框的，它碰到外边缘或另一个浮动元素的边缘时就不能移动了。如果水平位置无法容纳更多的浮动的元素了，那么就会移动到下一行。

3

Position

Position 属性能定义任意元素布局的定位。它是可以继承的，也就是说元素可以继承其父元素的position 属性，那一般该属性的值包括static、absolute、relative和fixed。接下来分别说说这4个值：

1. 无定位 static

Static 是默认值，表示没有定位，也就是说元素按照在普通流中的位置出现。比如说我用下面的代码创建了三个相同的盒子，它们就按照我的代码“排排坐”：

2. 相对定位 relative

相对定位指的是相对于元素在普通流中的位置上下/左右移动。举个，我把上面的box 2 向右移动40px，向下移动20px，那么就要写成是距离原来位置的左侧多了40px和距离上端多了20px（为了让效果更明显，我给box 2换了个颜色）：

我们能看到移动的元素会覆盖在其他的盒子上面，实际上，相对定位很强势，不管它是否移动，原来的位置仍然被它占有。就算把上面的盒子完全移出到box 3 的右侧，box 3 也无法侵犯不了它原来的位置：

3. 绝对定位 absolute

相比于相对定位，绝对定位要随和柔弱很多，因此也容易被人欺负。一旦它走出“家门”，其他元素就不会把位置留给它，于是它只能去找和它关系最近的，希望能给个容身之所。如果只把上面的相对定位改为绝对定位，那么box 2 将不再以原来的位置为标准移动，而是选择依照和它最近的且已经定位的元素移动：

但是现在其他两个盒子没有定位，那么它的位置就相对于包含它的块移动，在这里就是浏览器窗口的边距啦！所以box 2 现在的位置是距离浏览器上端20px，左侧40px：

4. 固定定位 fixed

Fixed 的特点类似于绝对定位，但它的参考标准只是浏览器窗口，那这里就不再说了。

4

总结

这篇我们真正认识到了CSS 中的定位机制，想想看我们现在是不是可以实现类似于返回顶部或者联系客服等浮动窗的效果呢？是不是保持元素相对于浏览器窗口的位置即可？或者能不能创造更多的样式？