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

最新推荐文章于 2025-06-11 09:00:13 发布

原创最新推荐文章于 2025-06-11 09:00:13 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

本文详细解析了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（相对定位)总是相对于前面的同级标