js中绝对定位于相对定位 position:absolute,relative

本文详细解析了CSS中的三种定位方式:绝对定位、相对定位和浮动定位。通过实例展示了这些定位方式如何影响元素的位置,并解释了它们之间的区别及应用场景。

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

绝对定位是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。
相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。
浮动定位才是常用的。
 
看例子:
<body>
<div id="bq1" style=" position:absolute; left:10px; top:10px; "></div>
<div id="bq2" style=" position:relative;"></div>
<div id="bq3" style=" position:relative;">
    <div id="bq4" style=" position:absolute; left:10px; top:10px;"></div>
</div>
</body>
以下只说id名代表div
绝对定位:position:absolute
如果bq1(绝对定位)外面没有div等父标签,bq1会以body为父标签。左边距距body 10像素,上边距距body 10像素。
如果bq4(绝对定位)在bq3(相对定位)里面,左边距距bq3 10像素,上边距距bq3 10像素。
 
相对定位:position:relative
bq2(相对定位)总是相对于前面的同级标
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值