制作css定位

CSS 定位方法

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

静态定位（Static）

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

.element {
  position: static;
}

相对定位（Relative）

相对定位的元素仍在文档流中占据空间，但可以通过 top、right、bottom、left 属性相对于其原始位置进行偏移。

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

绝对定位（Absolute）

绝对定位的元素脱离文档流，相对于最近的已定位（非 static）祖先元素定位。若无已定位祖先，则相对于初始包含块（通常是视口）。

.parent {
  position: relative;
}

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

固定定位（Fixed）

固定定位的元素脱离文档流，相对于浏览器视口定位。滚动页面时，元素位置保持不变。

.element {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

粘性定位（Sticky）

粘性定位的元素在特定滚动位置时表现为固定定位，其余时间表现为相对定位。需指定 top、right、bottom 或 left 值以触发粘性行为。

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

定位属性说明

• top、right、bottom、left：定义元素相对于其定位上下文的偏移量。
• z-index：控制堆叠顺序，数值越大越靠近用户。仅对非 static 定位元素有效。

实际应用示例

导航栏固定在顶部：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

模态框居中显示：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

侧边栏粘性定位：

.sidebar {
  position: sticky;
  top: 20px;
}