css的定位与区别（绝对定位、相对定位、固定定位）

以下文章为一些css部分代码的简单说明

首先是定位，这是css中重要的属性

定位:
position:static(静态定位)|relative(相对定位)|absolute(绝对定位)|fixed(固定定位)

相对定位:  移动后,依然占用标准文档流,原位也依然占位
实例:(其他定位格式类似)
position: relative;  位置 ：相对的 (有父元素就优先相对于父元素移动,无父元素则相对于自身移动)
top|bottom|left|right: 2px;  相对的方向:数值

绝对定位(二级分类/子菜单...):脱离文档流(不占位,浮动) 默认情况下相对于自身移动,如父元素或者祖先元素存在相对定位的时候,绝对元素将依赖相对元素来进行定位

position:absolute;

固定定位(顶部导航条...):依赖浏览器窗口  脱离文档流

position:fixed

从上面这四个我们可以得知，绝对定位是相对于整个文档或者最近一个有定位的父元素的，这种定位会导致元素会脱离文档流，浮动于文档的上方，不再占用文档里的位置，会随着文档或者有定位的父元素位置发生移动。

相对定位是相对于元素自身的原位置进行移动，不会脱离文档流，要注意的是，其原位置依然会继续占用文档位置。

固定定位就更简单了，是相对于屏幕进行定位的，元素会一直在屏幕的这个位置，都固定了，不会随着文档流发生位移，那么他肯定也会脱离文档流，不会随着文档流发生变化，也不会在文档中占用位置。

说完了这三个定位的区别，有时候我们会发现两个加了绝对absolute的元素，会引发一个盖住另一个，或者一个定位为absolute的元素挡住有fixed的元素的情况，这种情况的原因是在文档上面，是按Z轴进行堆叠的，可以理解为ps里的图层，类似于无数透明玻璃相互重叠在一起，其中文档流就处于Z轴为0的那块玻璃上，而定位为absolute或者ficed的元素在Z轴上是处于大于0的玻璃上的，当一个basolute元素比另一些元素在Z轴上的位置更大时，也就会更靠上，最终就会引起一个盖住另一个的情况。

理解了这个原理之后，我们显然可以通过调节元素在Z轴上的位置去进行调节了，其代码为：

z-index:number

其number是一个number数值，表达为其在Z轴上的位置。