css - 创建重叠的 div

Question

我试图重新创建一个设计，但是我在覆盖部分遇到了问题。我的思考过程是为菜单栏设置一个 div，为地球设置一个 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;

Answer 1

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

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

html, body {
  width: 100%;
  height: 100%;

}

body {
  margin: 0;
  background-repeat: no-repeat;
  background: #fee807;
  background-size: cover;
  background: url(https://via.placeholder.com/250) 80% -35% no-repeat;
  background: url(https://via.placeholder.com/250) 80% -35% no-repeat,
    linear-gradient(
        180deg,
        rgba(254, 232, 7, 1) 0%,
        rgba(240, 118, 75, 1) 37%,
        rgba(212, 62, 128, 1) 70%,
        rgba(129, 86, 158, 1) 92%
    );
}