Невозможно разместить div после другого div с фиксированной позицией

Question

У меня есть 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 опускается.

Вот изображение:

введите описание изображения здесь

Answer 1

Попытайтесь идентифицировать top и left у topBar, чтобы он оставался положительным, и измените maginTop из infoDiv

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'
} 

Answer 2

Поправьте меня, если я ошибаюсь, но я думаю, все, что вам нужно сделать, это установить положение желтого topBar с помощью top: 0 и left: 0. Это должно sh поместить его в верхнюю часть экрана.

Answer 3

Уберите margin-top из стиля infoDiv и попробуйте добавить margin-bottom к стилю topBar.