浅谈css中的定位属性

声明：本人学识有限，个人理解所写，文中如有错误或不当之处，请各路大神指出，谢谢！

浅谈css中的定位属性

1、普通流定位

普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：按照从上到下的方式逐个排列
如div、h1、h2、h3…p、ul等标签
页面中的行内元素：按照从左到右的方式逐个排列
如a、b、c、d等标签
但是如何让多个块级元素在一行内显示?

2、浮动定位

利用float标签实现块级元素作业排列

3、相对定位

也就是相对自身进行定位

position ：relative 
top：10px  

元素向下走10个像素
这里容易混淆，top：10px是指元素顶部相距10个像素向下走，可以设置负值。
配合属性(top/right/bottom/left)实现位置的改变

4、绝对定位

如果元素被设置为绝对定位的话，将具备以下几个特征
1、脱离文档流-不占据页面空间
2、通过偏移属性固定元素位置
3、当有多个已定位的祖先级元素，相对于最近的已定位的祖先元素实现位置固定
4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定

position ：absolute 

同样也可以用偏移属性(top/right/bottom/left)实现位置的固定
这里要注意绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。绝对定位非常好用，但不要什么地方都用，可能会造成CSS代码臃肿，应当适当使用，用于该使用地方。

5、粘性定位

将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动

position ：fixed 

同样可以用偏移属性(top/right/bottom/left)实现位置的固定

这里要注意的是这个box1块级元素会跟着滚动条一起走，就像粘在屏幕上了一样。