HTML的绝对定位与相对定位

本文详细解释了CSS中绝对定位和相对定位的概念及其工作原理。通过实例说明如何使用position属性来实现元素的精确布局,并讨论了嵌套元素的定位方式及overflow属性的影响。

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

绝对定位:position:absolute;
绝对定位会根据给定的top值或left值进行定位,浏览器会根据当前窗口的父窗口的左上角进行计算当前窗口应该存在的位置,前提是父窗口必须有定位属性(position:属性值),属性值可以是规定的任意值。如果父窗口没有定位属性,则浏览器会找父窗口的父窗口,也就是当前窗口的爷爷窗口,如果爷爷窗口页面也没有定位属性,则会继续往上找(有没有想起一句话:子子孙孙无穷尽也。)。如果一直没有找到,(那么就要去福利院了),当然如果一直没有找到,浏览器会根据自己的左上角进行计算。

相对定位:position:relative;
相对定位:相对自己之前的位置进行定位。也有两个属性,top,left;

嵌套:html的解析是自上而下进行解析,所以我们就直接先定位父窗口的位置,然后再子窗口,再孙窗口。

值得注意的是,css中的overflow的属性值默认是visible;也就是说如果定位超过父窗口的大小会撑开父窗口,从而让当前窗口显示出来,但是父窗口的大小并没有扩大。

如果文章有什么错误,或者对本文有什么别的见解,欢迎评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值