本文探讨了CSS定位的重要性，包括定位模式（静态、相对、绝对、固定）及其作用，以及偏移量在定位中的应用。通过实例解析，带你理解如何通过position属性和top/bottom/left/right调整元素位置，掌握从普通布局到高级定位的技巧。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
一、为什么需要定位
浮动只能实现元素水平布局的效果，不能实现让元素实现复杂的布局效果。
二、定位的组成
定位也是用于布局的，主要由两个部分组成：
定位=定位模式+偏移量
定位模式用于指定一个元素在文档中的定位方式。
偏移量则决定了该元素的最终位置
三、偏移量
当元素开启了定位之后，可以通过偏移量来设置元素位置
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下面的边距
left：定位元素和定位位置左侧距离
right：定位元素和定位位置右侧距离
四、开启定位
语法规则：
选择器{
position:定位模式
}
五、定位模式
1.静态定位：
div{
position: static;
}
特点：静态定位 按照标准流特性摆放位置，它没有边偏移。
2.相对定位
div{
position: relative;
}
特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
2.相对定位会提升元素的层级。
3.相对定位不会使元素脱离文档流。
4.相对定位不会改变元素的性质块还是块，行内还是行内。
3.绝对定位
div{
position: absolute;
}
特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。
2.开启绝对定位后，元素会从文档流中脱离。
3.绝对定位会改变元素的性值，行内变成块，块的高度被内容撑开的。
4.绝对定位会使元素提升一个层级。
4.固定定位
div{
position: fixed;
}
特点：
1.固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。
2.固定定位不占有原先位置，脱离标准流。
3.固定定位的元素不会随网页的滚动条滚动。
5.粘滞定位
div{
position: sticky;
}
特点：
1.粘滞定位和相对定位的特点基本一致。
2.粘性定位占用原有的位置
3.不同的是粘滞定位在元素到达某一个位置时就将其固定。
扫一扫
2360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
