页面上的重叠组件答案

【问题标题】：Overlap components on a page页面上的重叠组件
【发布时间】：2021-07-13 23:03:13
【问题描述】：

我试图让我的 CRA 看起来像这样：

这是我目前所拥有的，这个：

或者这个：

我无法将地图直接放在背景图像下方而不会阻挡大信息栏，但该栏实际上应该与地图重叠。这可以通过使用 flexbox 来完成吗？如果我尝试对地图进行绝对定位，它将挡住大信息栏。任何帮助将不胜感激。

我的CSS，会产生第一张图片，不会挡住信息栏：

.App {
  background-color: #fff;
  height: 100vh;
  width: 100%;
  position: relative;
} 

.img {
  background-image: url('./images/pattern-bg.png');
  background-size: cover;
  height: 300px;
  width: 100%;
  position: absolute;
}

.flexContainer {
  position: absolute;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.searchBar, .btn {
    margin: 40px 0px;
    border-width: 0px;
}

.searchBar {
    width: 400px;
    padding: 20px 25px;
    border-radius: 15px 0px 0px 15px;
    font-family: 'Rubik', sans-serif;
    font-size: 1em;
}

.btn {
    padding: 21px 25px;
    background-color: #000;
    border-radius: 0px 15px 15px 0px;
}

.map {
    height: 500px;
    max-height: none;
    width: 100%; 
    flex: 1 0 auto;
}

/* CSS for the big white information block */

.block {
    width: 1200px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.details {
    flex: 1;
    text-align: left;
    padding: 10px 20px;
    border-right: 1px solid #ccc;
    color: #000;
    font-family: 'Rubik', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
}

.lastElem {
    border: none;
}

我的 App.js 变得更简单

function App() {
  return (
    <div className="App">
      <div className="img">
        <div className="flexContainer">
            <Title />
            <SearchBar />
            <InformationBlock />
            <DisplayMap />
        </div>
      </div>
    </div>
  );
}

【问题讨论】：

1.使用position: absolute 作为栏 2. 将其最后放在容器中，使其与其他元素重叠
如果我这样做，该栏会被地图挡住。

标签： javascript html css reactjs flexbox

【解决方案1】：

我通过绝对定位组件来结合 Chris 的答案来使其工作（但将它放在容器中的其他组件和元素之上对我不起作用）。但我还在 .block className 中添加了z-index: 999;，这起到了作用。

【讨论】：