ralitive absolute

3、relative与absolute的主要区别：

首先，是上面已经提到过的在正常流中的位置存在与否。

其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如图4：

可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图5：

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

详文参考：http://www.csschina.net/a/jc/css_709.html

【编辑推荐】

1. 解读CSS中absolute与relative的区别和联系
2. CSS 绝对定位属性absolute用法初探
3. DIV CSS建站对浏览器兼容性和注意事项
4. CSS2.0中page-break-after属性用法
5. 解读DIV CSS网页布局中CSS无效十个原因

【责任编辑：程华权 TEL：（010）68476606】

<< 上一页 1 2查看全文

内容导航

第 1 页：position属性值定义

第 2 页：relative与absolute的主要区别

原文：CSS+DIV布局中absolute和relative区别(2)返回开发首页

---

---

分享到：

4

收藏|打印|复制

• 
  给力

  (0票)

• 
  动心

  (0票)

• 
  废话

  (0票)

• 
  专业

  (0票)

• 
  标题党

  (0票)

• 
  路过

  (0票)

关于absolute  relative  CSS的更多文章