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