CSS Position(定位)

CSS Position(定位)是CSS中一种用于控制元素在页面中位置的属性。通过设置不同的定位方式，开发人员可以精确地控制页面中各个元素的位置，实现个性化和专业化的页面设计。

CSS中共有5种定位方式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位）。

静态定位(static)

默认的定位方式是static，该元素始终位于其父容器的默认位置。该元素不受其他元素位置的影响，不会层叠在其他元素上方。

div {
  position: static;
}

相对定位（relative）是一种相对于元素自身默认位置进行的定位方式。通过设置left、right、top、bottom属性来控制元素相对于默认位置的偏移量。相对定位会导致元素在文档流中的位置被保留，因此可能会导致其他元素位置的变化。

div {
  position: relative;
  left: 30px;
  top: 50px;
}

绝对定位（absolute）是一种相对于父容器进行的定位方式。元素的位置可以通过设置left、right、top、bottom属性来控制。如果没有父容器，那么该元素会相对于浏览器窗口进行定位。元素的位置不占据文档流，因此可能会影响其他元素的位置。

div {
  position: absolute;
  left: 30px;
  top: 50px;
}

固定定位（fixed）是一种相对于浏览器窗口进行定位的定位方式。元素的位置可以通过设置left、right、top、bottom属性来控制。该元素的位置不随页面滚动而改变，它会始终呈现在浏览器窗口的固定位置。因此，通常用于创建固定的导航栏、通知栏等元素。

div {
  position: fixed;
  top: 0;
  left: 0;
}

粘性定位（sticky）是一种相对于容器进行定位的定位方式。元素在滚动到特定位置时开始固定，直到滚动到指定的临界位置时停止固定。粘性定位可以结合top、bottom、left、right属性来使用。

div {
  position: sticky;
  top: 10px;
}

以上是CSS Position(定位)的各种方式，通过这些方式可以实现各种复杂的页面布局效果。需要根据实际需求和场景来选用不同的定位方式。