js中position:relative与position:absolute 区别

本文深入探讨了网页布局中两种关键定位方式:absolute(绝对定位)和relative(相对定位)。通过实例解析,展示了它们如何在不同场景下应用,包括元素在页面上的精确位置控制和响应式设计的实现。

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

1、position:absolute这个是绝对定位;是相对于浏览器的定位
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。


比如:<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;

2的位置在1的右边,距离120px


2、position:absolute这个是绝对定位;它不会随着窗口大小变化,只是固定在一个特定的坐标轴上面;
position:relative 这是相对定位啊!和上面的相反,它可以随窗口大小变化。但大小仍然不会变。


要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值