度量快速开发平台-专业、快速的软件定制快开平台

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 部件 流程 SQL
查看: 2106|回复: 4
打印 上一主题 下一主题

[分享] css中相对定位和绝对定位

[复制链接]

235

主题

2547

帖子

5835

积分

论坛元老

Rank: 8Rank: 8

积分
5835
跳转到指定楼层
楼主
发表于 2020-2-6 16:31:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1. 仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留,物理空间偏移。图中,设置元素的left和top的值,对box2进行布局,可以发现除了box2偏移之外,其他块级元素的位置没有被影响,可见box2的占位空间还是存在的。层级关系为:
<div
<div box1
<div box2 ——– position:relative ; top:-60px; left:80px;
<div box3

2. 仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度,会影响文档流中的其它元素位置。例 如:margin-top:负值; margin-bottom:负值; 图中,box1和box2都设置了元素margin-bottom的值,值等于它们高度的负值。box1和box2物理空间没有改变,占位空间高度为 0。box3的margin-bottom值设置为0,物理空间没有改变,占位空间高度不变。再通过margin-left对box2和box3设置左偏 移值。层级关系为:
<div
<div box1 ——– position:relative ; margin-bottom:-102px;
<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图:

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况,它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。图中,box2是在上图的基础上增加设置left的值产生的效果,可见margin- left的值和left的值产生了累加。(偏移量:80px = 110px – 30px),层级关系为:
<div
<div box1 ——- position:relative ; margin-bottom:-102px;
<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; left:-30px;
<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图:


4.  仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,物可能是BODY或 HTML 元素)。
注意:IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后,元素的Left、 Right、Top和Bottom属性默认值不是0,只是将元素脱离文档流。以下例子说明这个问题。
在图中,将橘色box的祖先元素设置为定位元素(即参照物),box2设为绝对定位,文档流由box1-box2-box3变为box1-box3,可 box2却没有移动到距离参照物0值的位置上,可见box2的Left、 Right、Top和Bottom属性默认值不等于0,它只是脱离了文档流而已。层级关系为:
<div ———————————position:relative 参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–absolute
<div box3
效果图:

5、以最近的祖先定位元素为参照物的情况
图中,Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

下图,为改变参照物(橘色框)后的效果,层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

下图,参照物为最顶级的元素情况,层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

6. 仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在 的位置上偏移参照物。图中,使用margin属性布局相对定位元素。层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:




分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

235

主题

2547

帖子

5835

积分

论坛元老

Rank: 8Rank: 8

积分
5835
沙发
 楼主| 发表于 2020-2-6 17:14:29 | 只看该作者
回复 支持 反对

使用道具 举报

542

主题

5916

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13589
板凳
发表于 2020-2-7 14:20:26 | 只看该作者
哎布局中的相对绝对挺操蛋的
回复 支持 反对

使用道具 举报

235

主题

2547

帖子

5835

积分

论坛元老

Rank: 8Rank: 8

积分
5835
地板
 楼主| 发表于 2020-2-7 17:50:08 | 只看该作者
张兴康 发表于 2017-3-7 14:20
哎布局中的相对绝对挺操蛋的

是呢

点评

头像不错  详情 回复 发表于 2020-2-8 13:45
回复 支持 反对

使用道具 举报

542

主题

5916

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13589
5#
发表于 2020-2-8 13:45:36 | 只看该作者

头像不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|重庆度量科技  本站关键词:快速开发平台

GMT+8, 2024-12-24 21:17 , Processed in 0.133492 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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