时间戳

首页 > 解决方案 > 如何解决 React、CSS 和 Flexbox 的分层问题

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

问题描述

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

我研究了 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 后 在此处输入图像描述

标签： cssreactjsflexbox

解决方案

对 bigContainer 使用 position: relative，对 containerTwo 使用 position: absolute。

推荐阅读