如何将图片中显示的卡片之类的小部件放在应用程序栏的顶部？

// App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <header className="app-header">
        <div className="card">
          <h1>Card Title</h1>
          <p>Card content goes here...</p>
        </div>
      </header>
      <main>
        {/* Main content goes here */}
      </main>
    </div>
  );
}

export default App;

/* App.css */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  background-color: #f8f9fa;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}