css学习笔记之position

一说到position属性,自然而然就绕不开定位，那我们来先聊一聊CSS里的定位机制。

定位有三种机制：普通流，浮动和绝对定位。普通流是一种html文档里默认的定位机制，块级元素由上而下一个接一个排列，而行内元素在一行中水平排开。浮动（float），浮动的元素不在文档的普通流中，浮动的盒子可以向左或向右移动，直到碰到包含框或者另一个浮动的盒子边框为止。而绝对定位（aboslute）,就是position的一个属性

position有四个属性：aboslute,relative,static和fixed。

static是默认的定位方式。fixed定位是相对于整个浏览器窗口而言。而relative(相对定位)则被看作普通流定位中的一种,设置了relative属性的盒子，它的定位起点是自己本身在普通流中位置的左上角，然后我们就可以设置top,left等属性来决定它的位置了。最后，我们聊一聊绝对定位，绝对定位使元素的位置与文档流无关，因此不占据空间。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。