css制作页面置顶

使用 position: fixed 实现置顶

将元素固定在浏览器窗口顶部，不随页面滚动而移动。需设置 top: 0 和 left: 0 确保对齐视口左上角，并通过 width: 100% 让元素占满宽度。

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000; /* 确保置顶层高于其他内容 */
}

使用 position: sticky 实现条件置顶

元素在滚动到特定位置时固定，适合导航栏等场景。需指定 top: 0 作为触发固定的阈值，并设置父容器无 overflow: hidden。

.sticky-nav {
  position: sticky;
  top: 0;
  background: #333;
  color: white;
  z-index: 100;
}

通过 Flexbox 或 Grid 布局控制结构

结合现代布局方式，确保置顶元素与其他内容协调。例如在 Flex 容器中将置顶项放在首位：

.container {
  display: flex;
  flex-direction: column;
}
.header {
  order: -1; /* 强制置顶 */
}

处理置顶元素的空间占用

固定定位会脱离文档流，可能遮挡内容。解决方案是为后续内容添加等高的顶部内边距：

.main-content {
  padding-top: 60px; /* 与置顶栏高度匹配 */
}

响应式置顶的注意事项

在小屏幕设备上可能需要调整样式。通过媒体查询关闭固定定位或修改布局：

@media (max-width: 768px) {
  .sticky-header {
    position: static;
  }
}