Как исправить проблему с наложением слоев с помощью React, CSS и Flexbox

Question

Я пытаюсь наложить два контейнера друг на друга, но вместо этого он помещается в столбец

Я изучил z-index и многоуровневую структуру, но, похоже, это не работает.

Мой код: класс Приложение расширяет Компонент {

render () {

let bigContainer = {
  height: '30vh',
}

let containerOne = {
  height:'100%',
  zIndex:1,
  position: 'relative'
}

let containerTwo = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    height: '100%',
    position: 'relative'
}

let innerStyleOne = {
    backgroundColor: 'black',
    height: '15vh',
    position: 'relative',
    order: '2',
    width: '100%'
}

let innerStyleTwo = {
    backgroundColor: 'blue',
    height: '15vh',
    position: 'relative',
    order: '2',
    width: '100%'
}

let innerStyleLayer = {
    backgroundColor: 'green',
    position: 'relative',
    height: '25px',
    width: '25px'
}

return (
  <div className="App" style={bigContainer}>
    <div style = {containerOne}>
      <div style={innerStyleOne}> </div>
      <div style={innerStyleTwo}> </div>
    </div>
    <div style = {containerTwo}>
      <div style={innerStyleLayer}></div>
    </div>
  </div>
);

}}

Это результат, который я получаю

но я пытаюсь получить зеленый квадрат в середине синих и черных полос

Редактировать: после смены контейнера2 в положение: абсолютное

Answer 1

используя положение: относительное для bigContainer и положение: абсолютное значение для containerTwo.