如何使用React、CSS和Flexbox解决分层问题

我试图将两个容器层叠在一起，但它被放置在一个列中

我已经研究了z索引和分层，但它似乎不起作用

我的代码： 类应用程序扩展组件{

render（）{

let bigContainer={
高度：“30vh”，
}
设containerOne={
高度：'100%'，
zIndex:1，
位置：'相对'
}
设容器two={
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
zIndex:100，
高度：“100%”，
位置：'相对'
}
让innerStyleOne={
背景颜色：“黑色”，
高度：“15vh”，
位置：'相对'，
命令：‘2’，
宽度：“100%”
}
设innerStyleTwo={
背景颜色：“蓝色”，
高度：“15vh”，
位置：'相对'，
命令：‘2’，
宽度：“100%”
}
让innerStyleLayer={
背景颜色：“绿色”，
位置：'相对'，
高度：'25px'，
宽度：“25px”
}
返回(
);

} }

这就是我得到的结果

<>但是我想在蓝黑相间的酒吧里找到绿色广场

编辑：将container2更改为位置：绝对后 使用 位置：相对于bigContainer和

---

位置：containerTwo的绝对值。

我将位置更改为绝对值，但它只是移到了一边，我添加了一个编辑，显示发生的情况Class containerTwo使用：top:50%；左：50%；转换：转换（-50%，-50%）可以，但是为什么我们要添加顶部、左侧和转换？对不起。我英语说得不太好。你可以在这里看到更多

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>
);