还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 一、五种定位方式
- 1. `static`（静态定位）
- 2. `relative`（相对定位）
- 3. `absolute`（绝对定位）
- 4. `fixed`（固定定位）
- 5. `sticky`（粘性定位）
- 二、五种方式对比：
一、五种定位方式
CSS实际上有五种定位方式，以下是详细的解释以及示例代码和对比：
1. static（静态定位）
- 这是默认定位方式，元素遵循正常的文档流（normal flow），任何
top,right,bottom,left或z-index设置都不会生效。
示例代码：
.static-element {
position: static;
}
2. relative（相对定位）
- 相对定位是指元素相对于其正常文档流（static）的位置进行偏移，但它仍在文档流中占据原来的空间。
示例代码：
.relative-element {
position: relative;
top: 20px; /* 上移20像素 */
left: 10px; /* 左移10像素 */
}
3. absolute（绝对定位）
- 绝对定位的元素脱离文档流，相对于最近的非
static定位祖先元素进行定位。如果找不到这样的祖先元素，则相对于初始包含块（通常是视口）定位。
示例代码：
.parent {
position: relative;
}
.absolute-element {
position: absolute;
top: 0;
left: 50px; /* 相对于.parent左边缘左侧50像素 */
}
4. fixed（固定定位）
- 固定定位元素完全脱离文档流，始终相对于浏览器视口进行定位，即使页面滚动，它的位置也不会改变。
示例代码：
.fixed-element {
position: fixed;
bottom: 0; /* 元素位于浏览器窗口底部 */
right: 0; /* 元素位于浏览器窗口右侧 */
}
5. sticky（粘性定位）
- 粘性定位是一种混合定位方式，元素首先遵循正常的文档流，直到它到达指定的阈值（通常是视窗顶部或底部），之后转变为相对于视口的固定定位。
示例代码：
.sticky-element {
position: sticky;
top: 0; /* 当元素距离视口顶部小于等于0时，开始固定在顶部 */
background-color: #f90; /* 可见效果，方便演示 */
}
二、五种方式对比：
static不支持任何偏移属性，元素直接按照HTML的顺序和布局规则排列。relative支持偏移，但不脱离文档流，其他元素感知不到其偏移后的位置。absolute脱离文档流，可以自由移动至任意位置，受最近非static定位祖先约束。fixed脱离文档流且不受滚动影响，始终在视口的某个位置固定显示。sticky兼具文档流内的自然流动和滚动后的固定定位，在满足条件时行为类似于fixed定位。
