CSS - position:absolute VS position:relative

本文详细解析了CSS中的Position属性,包括relative和absolute两种定位方式的区别及使用场景。relative定位保留原有位置,通过left、right等属性调整自身偏移;absolute定位则使元素脱离文档流,通过top、bottom等属性相对于最近的已定位祖先元素定位。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。 

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
 
Reference:
http://zhidao.baidu.com/question/147612317.html
### CSS `position: absolute` 使用详解 #### 定义与作用 `position: absolute` 是一种定位模式,使得元素脱离标准文档流。这意味着该元素不再占据空间,并可以相对于最近的已定位祖先元素进行放置[^1]。 #### 关键特性 - **脱离文档流**:应用此属性后,元素不会影响其他兄弟节点的位置和尺寸计算。 - **基于最近已定位父容器**:如果存在具有非静态 (`relative`, `absolute`, 或者 `fixed`) 定位的祖辈,则依据最接近的一个;如果没有这样的先辈,默认参照初始包含块 (通常是视窗)[^3]. #### 属性解释 | 属性名 | 描述 | | --- | --- | | top | 设置元素顶部边缘距离其包含框的距离 | | bottom | 设置元素底部边缘距离其包含框的距离 | | left | 设置元素左侧边缘距离其包含框的距离 | | right | 设置元素右侧边缘距离其包含框的距离 | 这些偏移量属性仅当设置了 `position` 为 `absolute` 或其它非静态值时才有效[^2]。 #### 实际案例展示 下面是一个简单的 HTML 和 CSS 组合的例子,展示了如何利用绝对定位创建一个位于页面右下角的通知栏: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Absolute Position Example</title> <style> .container { position: relative; /* 创建一个新的层叠上下文 */ width: 100%; height: 200px; background-color: lightblue; } .notification-bar { position: absolute; bottom: 0; right: 0; padding: 1em; background-color: red; color: white; } </style> </head> <body> <div class="container"> <div class="notification-bar">这是一个通知栏。</div> </div> </body> </html> ``` 在这个例子中,`.container` 被赋予了一个相对定位,以便成为 `.notification-bar` 的定位基线。而后者通过设定 `bottom` 和 `right` 来精确调整自己的位置[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值