您的位置:首页 > Web前端 > CSS

position的relative与absolute的区别

2015-03-27 20:19 330 查看
           一直对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标签为父级。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css