【CSS】 position : static | absolute | relative | fixed | sticky

**CSS定位属性**

在 CSS 中，`position` 属性用于控制元素的位置和布局。它有五种不同的值：`static`、`absolute`、`relative`、`fixed` 和 `sticky`。每种值都有其特定的用途和效果。

###1. static`static` 是默认值，表示元素不会从正常流中脱离。其他元素的布局将围绕这个元素进行排列。

**示例代码**

css.element {
 position: static;
}

在上面的示例中，我们定义了一个 `.element` 类，它使用 `position: static;` 属性。这意味着该元素不会脱离正常流，其他元素将围绕它进行布局。

###2. absolute`absolute` 表示元素脱离正常流，根据其父元素的位置和尺寸进行定位。绝对定位元素不占据任何空间，它们的位置由 `top`、`right`、`bottom` 和 `left` 属性决定。

**示例代码**

css.element {
 position: absolute;
 top:10px;
 left:20px;
}

在上面的示例中，我们定义了一个 `.element` 类，它使用 `position: absolute;` 属性，并设置其 `top` 和 `left` 值为10px 和20px。这个元素将脱离正常流，根据父元素的位置和尺寸进行定位。

###3. relative`relative` 表示元素相对于正常流进行定位，但不脱离正常流。其他元素的布局将围绕这个元素进行排列。

**示例代码**

css.element {
 position: relative;
 top: -10px;
}

在上面的示例中，我们定义了一个 `.element` 类，它使用 `position: relative;` 属性，并设置其 `top` 值为 -10px。这个元素将相对于正常流进行定位，但不脱离正常流。

###4. fixed`fixed` 表示元素脱离正常流，根据视图窗口的位置和尺寸进行定位。固定定位元素不占据任何空间，它们的位置由 `top`、`right`、`bottom` 和 `left` 属性决定。

**示例代码**

css.element {
 position: fixed;
 top:10px;
 left:20px;
}

在上面的示例中，我们定义了一个 `.element` 类，它使用 `position: fixed;` 属性，并设置其 `top` 和 `left` 值为10px 和20px。这个元素将脱离正常流，根据视图窗口的位置和尺寸进行定位。

###5. sticky`sticky` 表示元素相对于正常流进行定位，但不脱离正常流。当元素滚动到某个点时，它将固定在该点。

**示例代码**

css.element {
 position: sticky;
 top: -10px;
}

在上面的示例中，我们定义了一个 `.element` 类，它使用 `position: sticky;` 属性，并设置其 `top` 值为 -10px。这个元素将相对于正常流进行定位，但不脱离正常流。当滚动到某个点时，它将固定在该点。

**总结**

CSS 定位属性有五种不同的值：`static`、`absolute`、`relative`、`fixed` 和 `sticky`。每种值都有其特定的用途和效果。通过了解这些属性的含义和示例代码，可以更好地控制元素的位置和布局。

**参考**

* [MDN Web Docs - CSS position]( />* [W3Schools - CSS Positioning](