如何固定MyTitle组件顶部？求Antd或CSS实现方案

是否是Space组件的问题？ #

不是。Space组件仅负责控制子元素的间距，本身属于流式布局容器。当MyForm高度增长导致页面整体滚动时，标题随容器上移消失，是因为整个Space容器处于流式文档流中，滚动时会被带出视口，和Space组件的功能无关。

解决方案 #

方案一：CSS固定定位（快速实现）

给MyTitle添加固定定位样式使其脱离文档流，同时给下方卡片设置上边距避免遮挡：

/* 给MyTitle添加类名后设置样式 */
.fixed-title {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff; /* 背景色覆盖下方内容 */
  z-index: 10; /* 确保标题在其他元素上方 */
  padding: 16px; /* 根据需求调整内边距 */
}

/* 给Card添加上边距 */
.card {
  margin-top: 80px; /* 数值根据MyTitle的实际高度调整 */
}

此时可以保留Space组件，但建议直接移除——因为固定定位的元素已脱离文档流，Space的垂直间距设置会失效，用margin控制卡片和标题的间距更直观。

方案二：使用Antd Layout组件（规范布局）

利用Antd的Layout组件拆分页面结构，用Layout.Header实现固定顶部标题，Layout.Content承载滚动内容：

import { Layout, Card } from 'antd';
const { Header, Content } = Layout;

// 组件代码
<Layout>
  <Header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 10 }}>
    <MyTitle />
  </Header>
  <Content style={{ marginTop: 64, padding: '0 24px' }}>
    {/* 64为Header默认高度，可根据MyTitle实际高度调整 */}
    <Card className="card">
      <MyForm />
    </Card>
  </Content>
</Layout>

这种方式符合Antd的布局设计规范，无需额外复杂样式，Content区域会自动适配页面滚动。

内容的提问来源于stack exchange，提问作者letters