制作css定位

CSS 定位方法

CSS 提供了多种定位方式，用于控制元素在页面中的位置。以下是常见的定位方法及其使用场景。

静态定位（static）

静态定位是元素的默认定位方式，元素按照正常的文档流排列。无法通过 top、right、bottom、left 或 z-index 属性调整位置。

.element {
  position: static;
}

相对定位（relative）

相对定位的元素仍占据文档流中的原始空间，但可以通过 top、right、bottom、left 属性调整位置。调整后的位置是相对于元素原始位置计算的。

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

绝对定位（absolute）

绝对定位的元素脱离文档流，不占据原始空间。其位置相对于最近的已定位（非 static）祖先元素或根元素（html）计算。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（fixed）

固定定位的元素脱离文档流，位置相对于浏览器视口计算。即使页面滚动，元素位置也不会改变。

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

粘性定位（sticky）

粘性定位的元素在特定滚动位置时表现为固定定位，否则保持相对定位。需要指定 top、right、bottom 或 left 属性以定义触发条件。

.element {
  position: sticky;
  top: 0;
}

定位属性的使用技巧

z-index 属性用于控制定位元素的堆叠顺序，数值越大，元素越靠前。仅对非 static 定位的元素有效。

.element {
  position: absolute;
  z-index: 10;
}

通过组合不同的定位方式和属性，可以实现复杂的布局效果。例如，使用相对定位和绝对定位结合，可以创建自定义的弹出菜单或工具提示。