无法将div固定位置后再定位div

由 发布于 jsxcss
 收藏

我有一个固定位置的div。下面有一个div，我很难定位。这是我的JSX标记：

<div>
   <div style={topBar}>
     REAL TIME AIR QUALITY INDEX
   </div>
   <div style={infoDiv}>
     Lorem Ipsum
   </div>
</div>

这是我的样式：

const topBar = {
  width: '100%',
  background: 'rgba(255,255,255,0.1)',
  position: 'fixed',
  padding: '10px',
  textAlign: 'center',
  fontWeight: '800',
  background: 'yellow'
}

const infoDiv = {
  background: 'red',
  marginTop: '100px'
}

My problem is that instead of topBar staying fixed to the top and infoDiv coming down 100px, the infoDiv stays on top and topBar comes down.

这是一张照片：