CSS定位详解

CSS定位详解

属性名：posstion

相对定位：relative

• 不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。

绝对定位：absolute

• 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

固定定位：fixed

• 固定定位，这里他所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

相对定位

position: relative

如果对某一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素"相对于"它的起点进行移动

绝对定位

position: absolute

绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，绝对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

固定定位

position: fixed

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。