css定位的方式

首先我们要先了解一个概念↓

文档流／脱离文档流

文档流，指的是元素在排版布局过程中，元素会从自上到下，从左到右的顺序依次排列；

脱离文档流，指的是元素不再按照这个自然顺序排列；别的元素在文档流中排列时就当没有这个脱硫文档流的元素一样；

脱离文档流的方法

 定位 ／ 浮动

1、定位的几种方式：

（1）、static： 默认值，按照文档流的顺序进行排列；-- 未脱离文档流，占据文档流；

（2）、relative：他将出现在它所在的位置之上，相对自己本身进行定位；移动将会覆盖文档流中的元素；（它所占的空间将依然会被保留）； -- 未脱离文档流，占据文档流；

（3）、absolute：相对于第一个relative定位的父元素进行定位；（他所占的空间将会从文档流中移除）

（4）、fixed：相对于浏览器窗口进行定位；（他所占的空间将会从文档流中移除）

    定位通过z-index进行层级显示；

2、浮动：

（1）、浮动的框可以向左或向右移动，直到碰到包含他的框或者另一个浮动元素的边框位置。

（2）、对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。

（3）、对普通元素的影响：浮动元素会从文档正常流中删除，使得紧挨它的元素位置发生偏移，影响布局。

（4）、对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。