css - React 中的样式固定位置

Question

我希望顶层 div 的消息“这是一条测试消息”固定在顶部，因此它始终在顶部并在我滚动时覆盖下面的 div(黑色背景)

"position: fixed"似乎没有用

function App() {
  return (
    <div>
      <div
        style={{
          top: "0px",
          position: "fixed",
          width: "100%",
          overflow: "hidden"
        }}
      >
        <p>this is a test message</p>
      </div>
      <div
        className="App"
        style={{
          marginTop: "50px",
          height: "2000px",
          width: "30px",
          background: "black"
        }}
      ></div>
    </div>
  );
}

Answer 1

我不需要对您的代码进行任何更改，我只是添加了一些颜色和一些高度:https://react-zda8ht.stackblitz.io

编辑链接:https://stackblitz.com/edit/react-zda8ht

这不是您要找的吗？