一直对position的relative(相对)和absolute(绝对)搞不太清,今天花了一天时间也算搞清楚了那么一些些。
相对定位:relative 没有脱离正常的文档流,被设置元素相对于其原始位置而进行定位,其原始占位信息仍存在。因此,移动元素会导致它覆盖其他框
绝对定位:absolute 脱离了文档流与浮动模型,独立于其他对象而存在,没有占位.
relative : 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素”相对于”它的原始起点进行移动。
absolute : 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。) 。绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示该大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。
绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位(通常最好再定义父级的CSS宽度和CSS高度)。这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角。
绝对定位如果父级不使用position:relative,而直接使用position:absolute绝对定位,这个时候将会以body标签为父级。