CSS 中有五种常见的定位方式，它们是：
1. 静态定位（Static）：元素的默认定位方式。在静态定位下，元素根据正常文档流进行布局，并不受到 top、left、bottom、right 等属性的影响。
HTML:
<div class="static-element"> 这是静态定位的元素。 </div>
CSS:
.static-element { position: static; }
2. 相对定位（Relative）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其在正常文档流中的位置进行定位。相对定位会保留元素在文档流中的空间，并可以通过偏移值来调整元素的位置。
HTML:
<div class="relative-container"> <div class="relative-element"> 这是相对定位的元素。 </div> </div>
CSS:
.relative-container { position: relative; } .relative-element { position: relative; top: 10px; left: 20px; }
3. 绝对定位（Absolute）：通过设置元素的位置属性（如 top、left、bottom、right）来相对于其最近的具有定位（position 属性为 relative、absolute、fixed 或 sticky）的祖先元素进行定位。绝对定位会脱离文档流，并且不会在布局中占用空间。
HTML:
<div class="absolute-container"> <div class="absolute-element"> 这是绝对定位的元素。 </div> </div>
CSS:
.absolute-container { position: relative; width: 200px; height: 200px; } .absolute-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
4. 固定定位（Fixed）：与绝对定位类似，但相对于浏览器窗口或包含框的位置进行定位，而不是相对于父级元素。固定定位的元素在滚动页面时会保持在视图的固定位置。
HTML:
<div class="fixed-element"> 这是固定定位的元素。 </div>
CSS:
.fixed-element { position: fixed; top: 0; right: 0; }
5. 粘性定位（Sticky）：粘性定位结合了相对定位和固定定位的特性。元素根据正常文档流进行布局，但当滚动到预定的阈值位置时会变为固定定位，保持在视图中的特定位置。
HTML:
<div class="sticky-element"> 这是粘性定位的元素。 </div>
CSS:
.sticky-element { position: sticky; top: 20px; }
这些定位方式可以通过 CSS 的 `position` 属性来设置，并配合使用 `top`、`left`、`bottom`、`right` 等属性调整元素的位置。
