定位

在 CSS 中，元素的定位主要通过 position 属性来控制，它决定了元素在页面中的布局行为。理解定位的关键在于理解“文档流”——即元素在页面中默认的从上到下、从左到右的排列方式。

CSS 提供了五种主要的定位方式，每种都有其独特的特性和应用场景。

这是所有元素的默认定位方式。

元素相对于它在正常文档流中的原始位置进行偏移。

特点：
1. 不脱离文档流： 元素虽然视觉上移动了，但它在文档流中原来占据的空间依然保留，不会影响其他元素的布局。
2. 作为参照物： 常被用作其内部绝对定位或固定定位子元素的定位参照点。
偏移属性： 使用 top, right, bottom, left 来指定元素从其原始位置的偏移量。

元素完全脱离正常的文档流，不再占据任何空间。

特点：
1. 脱离文档流： 元素从文档流中移除，其他元素会像它不存在一样进行布局。
2. 定位参照： 元素会相对于其最近的、position 属性不为 static 的祖先元素进行定位。如果找不到这样的祖先元素，则相对于初始包含块（通常是视口或 <body>）定位。
偏移属性： 使用 top, right, bottom, left 来指定元素相对于其定位参照物的位置。

元素同样脱离文档流，但其定位参照物是浏览器的视口（viewport）。

特点：
1. 脱离文档流： 不占据文档流中的空间。
2. 固定于视口： 元素的位置相对于浏览器窗口是固定的，即使页面滚动，它也会保持在相同的位置。
偏移属性： 使用 top, right, bottom, left 来指定元素相对于视口的位置。

这是一种混合了相对定位和固定定位特性的定位方式。

特点：
1. 动态切换： 元素在跨越一个特定的阈值（由 top, right, bottom, left 定义）之前，表现为相对定位；一旦跨越阈值，就表现为固定定位，固定在视口中。
2. 不脱离文档流： 在变为固定定位前，它始终在文档流中占据空间。
偏移属性： 必须至少指定 top, right, bottom, left 中的一个值，以定义其“粘性”的阈值。

为了更清晰地理解它们的区别，可以参考下表：

定位方式	是否脱离文档流	定位参照物	典型应用场景
static	否	无	默认布局
relative	否	自身原始位置	微调元素位置、作为绝对定位子元素的容器
absolute	是	最近的非 static 祖先	下拉菜单、模态框、工具提示
fixed	是	浏览器视口	导航栏、返回顶部按钮、悬浮广告
sticky	否 (切换后是)	自身/视口	粘性页眉、表格固定表头

当元素定位后（即 position 值不为 static），可以使用 z-index 属性来控制它们在 Z 轴（垂直于屏幕的方向）上的堆叠顺序。z-index 值越大的元素会显示在值越小的元素之上。