Css 创建重叠div

我试图重新设计，但我有重叠部分的问题。我的思维过程是为菜单栏添加一个div，为globe添加一个div，为标题文本添加一个div。然而，将这些表面覆盖物定位给我带来了麻烦。我试着用zIndex，但似乎没用

我目前有：

我的代码在我的App.js中的设置方式：

import React from 'react';
import logo from './logo.svg';
import Globe from './Assets/Globe_.png';
import './App.css';
import Nav from './Components/Nav';
import Header from './Components/Header';
import WhatWeDo from './Components/WhatWeDo';
import { Container, Box, BoxTitle, BoxText } from "./Components/GlobalStyles";
import './App.css';

//Make bg gradient in the global style
//remove image resizer dependency and flexa 

function App() {
  return (
    <div className="bg-gradient">
    <Container>
      <div>
        <Nav />
          <img src={Globe} className="responsive" alt="Unicron" />
        <Header />
        <WhatWeDo />
      </div>
      </Container>
      </div>
  );
}


export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
从“./Assets/Globe_u2;.png”导入地球仪；
导入“/App.css”；
从“./Components/Nav”导入导航；
从“./Components/Header”导入标题；
从“./Components/WhatWeDo”导入WhatWeDo；
从“/Components/GlobalStyles”导入{Container，Box，BoxTitle，BoxText}；
导入“/App.css”；
//以全局样式生成bg渐变
//删除图像大小调整器依赖项和flexa
函数App（）{
返回(
);
}
导出默认应用程序；

因此，为了将它们分层，您需要将它们全部定位为绝对值，然后通过在x、y轴和z索引上平移或使用“上/下/左/右”属性对它们进行排序，我不建议这样做，因为这将很难管理。它也会使后面的元素无法访问

由于地球仪是一个背景图像，您可以在线性渐变的顶部制作一个背景图像，如下图所示，然后您的标题和文本可以在正常文档流中的预期位置占据背景顶部的空间，您可以从那里调整它们

html，正文{
宽度：100%；
身高：100%；
}
身体{
保证金：0；
背景重复：无重复；
背景：#fee807；
背景尺寸：封面；
背景：url(https://via.placeholder.com/250)80%-35%不重复；
背景：url(https://via.placeholder.com/250)80%-35%不重复，
线性梯度(
180度，
rgba（254,232,7,1）0%，
rgba（240118,75,1）37%，
rgba（212,62,128,1）70%，
rgba（129,86,158,1）92%
);
}

结果

---

HTML

<div class="bg-gradient">
  <div class="container">
    <div class="menu">
      <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </div>

    <div class="globe">
    </div>

    <div class="text">
      <h1>MAKE THE CONNECTION</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>       
  </div>
</div>

---

仅将图像用作背景图像？我认为使用css将全球图像设置为背景将使事情更容易处理。无论是背景图像建议，还是使用css/scss来定位元素，使父元素相对，子元素相对，并使用z索引将它们推到需要的位置。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bg-gradient {
  width: 100vw;
  height: 100vh;

  background: yellow;
}

.menu ul {
  background: red;
  display: flex;
}

.menu ul li {
  margin: 10px;
  list-style: none;
}

.globe {
  width: 300px;
  height: 300px;
  background: green;
}

.container {
  max-width: 80%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.menu {
  grid-column: 1 / 3;
   grid-row: 1 / 2;
}

.globe {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.text {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}