引导者

cssposition

简介

CSS position 属性用于指定元素在文档流中的定位。它允许元素相对于其正常位置进行偏移或定位。

多级标题

一级标题：静态定位

默认值。元素在正常文档流中占据其位置。

二级标题：相对定位

相对于其正常位置偏移元素。

偏移量由 top、right、bottom 和 left 属性指定。

三级标题：绝对定位

从正常文档流中移除元素，并相对于其最近的已定位祖先进行定位。

位置由 top、right、bottom 和 left 属性指定，或者如果未指定，则位于窗口左上角。

四级标题：固定定位

相对于浏览器窗口本身定位元素。

即使滚动文档，元素也会保持在相同位置。

位置由 top、right、bottom 和 left 属性指定。

五级标题：粘性定位

结合了相对定位和固定定位。

元素在正常文档流中占据其位置，但当滚动到特定点时会变为固定定位。

粘性位置由 top、right、bottom 和 left 属性以及 position: sticky; 值指定。

内容详细说明

静态定位

没有指定 position 属性的元素将具有静态定位。它们将占据其在正常文档流中的位置。

相对定位

相对于其正常位置偏移元素。偏移量由 top、right、bottom 和 left 属性指定，以正负像素值表示。例如：```css div {position: relative;top: 50px;left: 100px; } ```

绝对定位

从正常文档流中移除元素并相对于其最近的已定位祖先进行定位。位置由 top、right、bottom 和 left 属性指定。如果未指定，则元素位于窗口左上角。例如：```css div {position: absolute;top: 0;left: 0; } ```

固定定位

相对于浏览器窗口本身定位元素。即使滚动文档，元素也会保持在相同位置。位置由 top、right、bottom 和 left 属性指定。例如：```css div {position: fixed;top: 0;right: 0; } ```

粘性定位

结合了相对定位和固定定位。元素在正常文档流中占据其位置，但当滚动到特定点时会变为固定定位。粘性位置由 top、right、bottom 和 left 属性以及 position: sticky; 值指定。例如：```css div {position: sticky;top: 50px; } ```

注意事项

只有块级元素才能使用 position 属性。

绝对定位和固定定位的元素会从文档流中移除，因此它们不会影响其他元素的位置。

粘性定位仅在支持它的浏览器中受支持。

**cssposition****简介**CSS position 属性用于指定元素在文档流中的定位。它允许元素相对于其正常位置进行偏移或定位。**多级标题****一级标题：静态定位*** 默认值。元素在正常文档流中占据其位置。**二级标题：相对定位*** 相对于其正常位置偏移元素。 * 偏移量由 top、right、bottom 和 left 属性指定。**三级标题：绝对定位*** 从正常文档流中移除元素，并相对于其最近的已定位祖先进行定位。 * 位置由 top、right、bottom 和 left 属性指定，或者如果未指定，则位于窗口左上角。**四级标题：固定定位*** 相对于浏览器窗口本身定位元素。 * 即使滚动文档，元素也会保持在相同位置。 * 位置由 top、right、bottom 和 left 属性指定。**五级标题：粘性定位*** 结合了相对定位和固定定位。 * 元素在正常文档流中占据其位置，但当滚动到特定点时会变为固定定位。 * 粘性位置由 top、right、bottom 和 left 属性以及 position: sticky; 值指定。**内容详细说明****静态定位**没有指定 position 属性的元素将具有静态定位。它们将占据其在正常文档流中的位置。**相对定位**相对于其正常位置偏移元素。偏移量由 top、right、bottom 和 left 属性指定，以正负像素值表示。例如：```css div {position: relative;top: 50px;left: 100px; } ```**绝对定位**从正常文档流中移除元素并相对于其最近的已定位祖先进行定位。位置由 top、right、bottom 和 left 属性指定。如果未指定，则元素位于窗口左上角。例如：```css div {position: absolute;top: 0;left: 0; } ```**固定定位**相对于浏览器窗口本身定位元素。即使滚动文档，元素也会保持在相同位置。位置由 top、right、bottom 和 left 属性指定。例如：```css div {position: fixed;top: 0;right: 0; } ```**粘性定位**结合了相对定位和固定定位。元素在正常文档流中占据其位置，但当滚动到特定点时会变为固定定位。粘性位置由 top、right、bottom 和 left 属性以及 position: sticky; 值指定。例如：```css div {position: sticky;top: 50px; } ```**注意事项*** 只有块级元素才能使用 position 属性。 * 绝对定位和固定定位的元素会从文档流中移除，因此它们不会影响其他元素的位置。 * 粘性定位仅在支持它的浏览器中受支持。