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

Question

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

我研究了 z-index 和分层，但它似乎不起作用。

我的代码： 类 App 扩展组件 {

渲染() {

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

} }

这是我得到的结果

但我试图让绿色方块位于蓝色和黑色条的中间

编辑：将 container2 更改为 position:absolute 后

Answer 1

使用 位置：相对于 bigContainer 和 位置：containerTwo 的绝对位置。