css定位有哪几种方式

定位属性的概念：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
文档流：
（1）普通流：从上至下、从左至右
（2）浮动流：元素添加了float
（3）定位流：添加了定位属性
定位：position
坐标位置 水平 （left right）； 垂直 （top bottom）
Position属性的四大定位

• 1、相对定位（relative）

1）、占据位置，不脱离文档流
2）、参考自身默认加载在页面中的位置
代码如下
相对定位的效果

没有相对定位的效果

• 2、绝对定位（absolute）

是相对于父级元素定位的，如果没有父级元素的话，就对body定位
1）、不占据位置，脱离文档流。
2）、参考HTML元素（浏览器）改变在页面中的位置。
代码如下

有绝对定位的效果

没有绝对定位的效果

• 3、固定定位（fixed）

跟绝对定位是有点相似的，只不过它的父级元素永远都是视窗本身。
1）、不占据位置，脱离文档流。
2）、参考浏览器改变在页面中的位置，不会随着页面的滚动而滚动。
代码如下

没有加固定定位时的效果

加了固定定位后

• 4、默认定位（static)
  默认值时，设置坐标无效

知识点：absolute和relative的区别
1、是否占据文档流：absolute不占据；relative占据。
2、参考物不同：absolute参考HTML；relative参考自身

逆战班：王娟