无法在另一个固定位置的 div 之后定位 div答案

【问题标题】：Can't position div after another div with position fixed无法在另一个固定位置的 div 之后定位 div
【发布时间】：2020-11-22 19:09:39
【问题描述】：

我有一个位置固定的 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'
}

我的问题是，topBar 不是固定在顶部，infoDiv 下降 100 像素，而是 infoDiv 保持在顶部，topBar 下降。

这是一张图片：

【问题讨论】：

标签： html css jsx

【解决方案1】：

尝试识别topBar 的top 和left 使其保持上涨并更改infoDiv 的maginTop

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

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

【讨论】：

【解决方案2】：

如果我错了，请纠正我，但我认为您需要做的就是使用top: 0 和left: 0 设置黄色topBar 的位置。这应该会将其推到屏幕顶部。

【讨论】：

【解决方案3】：

从 infoDiv 样式中去掉 margin-top 并尝试将 margin-bottom 添加到 topBar 样式中。

【讨论】：