当前位置：首页 > news >正文

position定位静态定位/绝对定位/相对定位

news 2025/8/26 12:52:00

1.静态定位static：按照标准流进行布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准relative:相当于太自己便宜*/position: static;width: 200px;height: 120px;border: 1px solid black;}</style></head><body><div class="main"><div class="son">静态定位</div></div>
</body>
</html>

2.绝对定位absolute：以父结点为基准进行定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: absolute;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div class="son">绝对定位</div></div>
</body>
</html>

3.相对定位relative：相对于原来的标准位置进行偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: relative;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div>普通盒子</div><div>1</div><div class="son">相对定位</div></div>
</body>
</html>

此时将position换成absolute效果如下

对比一下绝对定位和相对定位