在 CSS 中，position 属性用于控制元素的定位方式。在 web 开发中，掌握定位技巧是非常重要的，可以帮助我们实现各种炫酷的布局效果。
四种定位方式
在 CSS 中，有四种常见的定位方式，分别是：
- static（静态定位）
- relative（相对定位）
- absolute（绝对定位）
- fixed（固定定位）
1. 静态定位（static）
静态定位是元素的默认定位方式，元素按照正常文档流进行排列，不会受到 top、right、bottom、left 属性的影响。
.static {
position: static;
}2. 相对定位（relative）
相对定位是相对于元素自身在正常文档流中的位置进行定位，通过设置 top、right、bottom、left 属性来调整元素的位置。
.relative {
position: relative;
top: 10px;
left: 20px;
}3. 绝对定位（absolute）
绝对定位是相对于最近的非静态定位的父元素进行定位，如果没有非静态定位的父元素，则相对于 <html> 元素定位。
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}4. 固定定位（fixed）
固定定位是相对于浏览器窗口进行定位，元素会随着页面滚动而固定在指定位置。
.fixed {
position: fixed;
top: 0;
right: 0;
}层叠顺序
在使用绝对定位和固定定位时，还需要了解层叠顺序的概念。z-index 属性用于控制元素的层叠顺序，数值越大，元素越靠前显示。
.z-index {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}总结
通过本章节的学习，我们了解了 CSS 中的四种定位方式以及层叠顺序的概念。掌握这些知识可以帮助我们更加灵活地布局页面，实现各种炫酷的效果。接下来，让我们继续深入学习 CSS 的其他知识点吧！