CSS定位

CSS定位有三种

普通流：普通流中的元素的位置由元素在 HTML 文档中的位置决定。没有特殊设定的情况下块级框从上到下一个接一个地排列，除非专门指定，否则所有框都在普通流中定位。

浮动：浮动框不在文档的普通流中，所以普通流中的块框表现得就像浮动框不存在一样但是块框的文本内容会受到浮动元素的影响。

相对定位：设置为绝对定位的元素框从普通流完全删除，元素原先在普通流中所占的空间会关闭，就好像该元素原来不存在一样。

使用浮动元素或者元素定位后会生成一个块级框，不论它本身是何种元素

CSS中的定位属性

position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow:设置当元素的内容溢出其区域时发生的事情。
clip:设置元素的形状，元素被剪入这个形状之中，然后显示出来。
vertical-align:设置元素的垂直对齐方式。
z-index:设置元素的堆叠顺序
static:position的默认值，相当于没有定位；不脱离普通流，占据页面空间。
relative:位置相对于自身的位置；不脱离文档流，占据页面空间。
absolute:位置相对于已定位的祖先元素；脱离普通流，不占据页面空间。
fixed:位置相对于浏览器窗口；脱离文档流，不占据页面空间

注意：

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