Css 为什么滚动时标题不固定？

我尝试了

位置的css属性：已修复。我还尝试了
位置：sticky，top:0
，但标题没有固定

这是我的代码，正如您所看到的，我使用react和antd作为组件库

import * as React from "react";
import { render } from "react-dom";
import { Row, Col } from "antd";

import "./styles.css";

function App() {
   return (
     <div>
       <Row className="header">
         <Col
           span={24}
           style={{
             background: "#0392FD",
             position: "sticky",
             top: 0
           }}
         >
          <div>
            <Row>
              <Col>Col1</Col>
              <Col>Col1</Col>
              <Col>Col1</Col>
            </Row>
          </div>
        </Col>
       </Row>
       <Row className="content">
         <Col span={24} style={{ height: "120vh" }}>
           Content
         </Col>
       </Row>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

我知道有很多解决方案，我尝试了很多
 而不是

<Row className="header">
<Col
  span={24}
  style={{
    background: "#0392FD",
    position: "sticky",
    top: 0
  }}
>



你应该这样写

<Row
    className="header"
    style={{
        background: "#0392FD",
        position: "sticky",
        top: 0
      }}
>
<Col span={24}>




为什么?
Col
的父级是
行
。两者的高度相同
Col
仅当其父项较高时才会保持不变，并且在滚动过程中，
Col
将消失。这永远不会发生，因为正如我所说，他们都是同一个高度。如果您在
行
上设置
位置：粘性
，则哪个父级包含整个页面（父级高于web浏览器窗口）
位置：粘性
将正常工作。
您的代码必须位于页眉上，而不是页眉内的div上

只需将其添加到style.css文件中

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

它工作正常。
在问题本身中添加一个链接，而不仅仅是一个指向外部资源的链接（可能是脱机的、被阻止的或由于其他原因无法访问的…），尝试使用position:fixed！重要
位置：固定；排名：0；宽度：100%
应该有效。您的样式应用于标题内的列，而不是标题div
.header {
  position: sticky;
  top: 0;
}