本文详细介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。包括它们的基本概念、使用方法及注意事项，帮助读者理解如何更好地控制网页元素的位置。
定位相关复习
文档流：
HTML的布局机制，块元素独占一行，内联元素（inline）不独占一行
（1）相对定位：
相对于一个东西来定位。这个东西就是它本身，同时可以使用left、top、bottom、right来移动元素的位置。
相对定位不会脱离文档流
（2）绝对定位：
找一个东西相对来绝对定位。这个东西（element）必须设定position，并且定位方式非static。
（这个小鬼（element）定位可以是爸爸、爷爷、太公...（祖宗：body）中有position：absolute或position：relative、fixed， 就是不能是position：static或直接没有写定位）
注：绝对定位脱离文档流。一般使用“父相子绝”。
使用绝对定位设置top:0px和不设置top属性的区别：未设置时：元素的位置和没有脱离文档流的位置一样
<body>
<div
class="div1"
style="width:
250px;height:
250px;border:
1px solid blue">
太公
<div
class="div2"
style="width:
200px;height:
200px;border:
1px solid magenta">
爷爷
<div
class="div3"
style="width:
150px;height:
150px;border:
1px solid gold;position:
fixed">
爸爸
<div
class="div4"
style="width:
100px;height:
100px;border:
1px solid red;position:
absolute;bottom:
0px">
小鬼
</div>
</div>
</div>
</div>
</body>
（3）fixed定位：相对于浏览器窗口的定位
使用了position属性，一般不使用margin，padding属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
