定位属性
1. 相对定位（Relative Positioning）
相对定位是相对于元素在文档流中的原始位置进行定位的。这意味着元素仍然占据着其原始位置，但可以通过指定top、right、bottom、left等属性来相对于其原始位置进行偏移。相对定位的元素不会脱离文档流。
示例：
.relative-box {
position: relative;
top: 20px;
left: 30px;
}
2. 绝对定位（Absolute Positioning）
绝对定位是相对于最近的已定位祖先元素（通常是父元素）进行定位的，如果没有已定位的祖先元素，则相对于最初的包含块（通常是 <html> 元素）进行定位。绝对定位的元素会脱离文档流，因此不会影响其他元素的布局。
示例：
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}
3. 固定定位（Fixed Positioning）
固定定位是相对于浏览器窗口进行定位的，元素将始终保持在页面的固定位置，即使页面滚动也不会改变位置。固定定位的元素同样会脱离文档流。
示例：
.fixed-box {
position: fixed;
top: 10px;
right: 20px;
}
4. 粘性定位（Sticky Positioning）
粘性定位是相对定位和固定定位的混合，元素在滚动到特定位置时会变为固定定位，否则保持相对定位。粘性定位目前处于实验性阶段，部分浏览器可能不完全支持。
示例：
.sticky-box {
position: sticky;
top: 0;
}
5. 静态定位（Static Positioning）
静态定位是元素的默认定位方式，即元素在文档流中按照其在HTML中的顺序依次排列。它不受top、right、bottom、left等属性的影响，也不会被其他定位属性影响。
示例：
.static-box {
position: static;
}
与其他定位属性的对比
与其他定位属性不同，static并不会改变元素的定位方式。它仅仅是告诉浏览器使用元素默认的定位方式，即按照文档流排列。这使得它在很多情况下并不被主动使用，因为它并没有提供对元素位置的精确控制。
注意事项
- 使用
static时，top、right、bottom、left等属性是无效的，因为它们只对非静态定位的元素生效。 - 当不需要对元素进行特殊定位时，元素将自动采用
static定位。
定位属性的用法
（1）结合定位属性使用
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
（2）与其他属性结合使用
定位属性通常与top、right、bottom、left等属性一起使用，以确定元素在页面中的确切位置。
.box {
position: absolute;
top: 50%;
left: 50%;
}
子绝父相
子绝父相是指子元素使用position: absolute;而父元素使用position:relative;的布局技术。这种布局方式可以有效地控制子元素相对于父元素的位置，而不会脱离父元素的布局流。
子绝父绝，子绝父固，都是以最近的非static父辈元素作为参考点。 父绝子绝，子绝父固，没有实战意义，布局网站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反父相子绝在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
