CSS 定位是控制元素在页面中位置的重要方式。通过不同的定位方式，我们可以精确控制元素的位置，创建复杂的布局效果。
CSS 中的定位通过 position 属性来实现，它决定了元素如何定位。每个定位的元素都可以使用 top、right、bottom 和 left 属性来指定其相对于参考点的位置。
position 属性有以下几种取值：
静态定位是元素的默认定位方式，元素按照文档流正常排列。
.element {position: static;top: 10px; /* 在静态定位中，top、right、bottom、left 属性无效 */left: 20px;}
Tips: 静态定位的元素不受 top、right、bottom、left 属性的影响，它们会按照文档流正常排列。
相对定位是相对于元素原来的位置进行偏移，元素仍然占据原来的空间。
.element {position: relative;top: 10px; /* 向下偏移 10px */left: 20px; /* 向右偏移 20px */}
相对定位的特点：
绝对定位是相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的根元素（<html>）定位。
.parent {position: relative; /* 为子元素提供定位参考点 */}.child {position: absolute;top: 10px; /* 距离父元素顶部 10px */right: 20px; /* 距离父元素右侧 20px */}
绝对定位的特点：
固定定位是相对于浏览器视口进行定位，元素会固定在视口的某个位置，即使页面滚动也不会移动。
.element {position: fixed;top: 10px; /* 距离视口顶部 10px */right: 20px; /* 距离视口右侧 20px */}
固定定位的特点：
粘性定位是相对定位和固定定位的混合，元素在达到指定的阈值之前表现为相对定位，达到阈值后表现为固定定位。
.element {position: sticky;top: 0; /* 当元素距离视口顶部 0px 时，变为固定定位 */}
粘性定位的特点：
当多个定位元素重叠时，z-index 属性控制它们的堆叠顺序。值越大的元素会显示在值越小的元素之上。
.element1 {position: absolute;z-index: 1;}.element2 {position: absolute;z-index: 2; /* element2 会显示在 element1 之上 */}
z-index 的特点：
Tips: 当父元素的 z-index 值不同时，子元素的 z-index 只在父元素内部有效。例如，即使子元素的 z-index 值很大，如果父元素的 z-index 值很小，子元素也会被其他 z-index 值较大的父元素的子元素覆盖。
让我们通过一个简单的例子来练习不同的定位方式。
这个简单的示例展示了三种主要的定位方式：
固定定位（fixed）：
相对定位（relative）：
绝对定位（absolute）：
