源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 425|回复: 13

[CSS/HTML] 认识CSS中absolute与relative

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2006-9-25 00:00:00 | 显示全部楼层 |阅读模式

很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

Absolute,CSS中的写法是:position:absolute; TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

回复

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2022-8-11 14:40:54 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

0

主题

8878

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-20 13:01:51 | 显示全部楼层
而快乐你们快乐马年快乐
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2022-9-14 15:28:18 | 显示全部楼层
数据库了多久撒快乐的健身卡啦
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2022-9-20 22:31:04 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2022-12-26 02:08:56 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

15

主题

1万

回帖

122

积分

注册会员

Rank: 2

积分
122
发表于 2023-9-15 02:54:04 | 显示全部楼层
2222222222222222
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-19 09:52:44 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-10-16 17:01:21 | 显示全部楼层
儿童服务绯闻绯闻绯闻
回复 支持 反对

使用道具 举报

12

主题

1万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2023-12-3 23:37:34 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-9-21 01:33 , Processed in 0.148018 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表