css定位问题

何时会用到定位

在进行页面布局的时候，我们会用到定位，用于将元素放置在我们想要（UE原型图或者UI设计稿）的位置，达到设计要求。

1. 定位的4个关键字 ，分别是static（静态的，默认是这个属性）、fixed（固定的）、absolute（绝对的）以及relative（相对的）；
2. 不会脱离正常文档流的定位属性有： static和relative，不会改变元素的盒模型，也不会使元素成为会计元素；
3. 会脱离文档流的是： absolute ，会让元素成为块级元素；
4. 通常所说的定位指的是： absolute、relative和fixed；

什么是文档流

虽然css的布局看起来是在二维平面上，但是css布局有一个属性叫做z-index，用来表示三维的z轴，当属性值为z-index:0;时，即表示在二维平面上，也就是所谓的正常文档流，而absolute和relative会让元素浮起来，也就是z-index的值大于零的情况，只是absolute会脱离正常文档流，不会保留在正常文档流中的占位符，而relative会保留在正常文档流中的占位符

1. 给fixed和absolute定位的元素设置float时不会生效；
2. float也会脱离正常正常文档流；

分类

按照是否会脱离文档流：

会脱离文档流	不会脱离文档流	是否成为块级元素	top\bottom\left\right是否可用
absolute	relative	是	是
float	static	inline–block	否