时间戳

首页 > 解决方案 > 在 React 中设置固定位置

css - 在 React 中设置固定位置

问题描述

我希望将消息“这是一条测试消息”的顶级 div 固定在顶部，以便在我滚动时它始终位于顶部并覆盖以下 div 甚至（黑色背景）

“位置：固定”似乎无法正常工作

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>
  );
}

标签： cssreactjs

解决方案

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

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

这不是你要找的吗？

推荐阅读