Создание перекрывающихся div

Question

Я пытаюсь воссоздать дизайн, но у меня проблемы с оверлеем. Мой мыслительный процесс состоит в том, чтобы иметь div для строки меню, div для глобуса и div для текста заголовка. Тем не менее, расположение этих элементов на первый взгляд вызывает у меня проблемы. Я пытался использовать zIndex, но это не помогает.

В настоящее время у меня есть это:

Способ установки моего кода в моем Приложение. 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

РЕЗУЛЬТАТ

---

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

* {
  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;
}

Answer 2

Так что для того, чтобы они были наслоены, вам нужно либо расположить их все абсолютные, а затем упорядочить их либо с помощью перемещения по осям x и y и z-index, либо используя свойства top / bottom / left / right, я не рекомендую, потому что это будет трудно управлять. Это также может привести к тому, что элементы сзади станут недоступными!

Поскольку глобус является фоновым изображением, вы можете сделать его фоновым изображением поверх линейного градиента, как показано ниже, тогда ваш заголовок и текст могут занимать пространство поверх фона в их ожидаемом положении. в пределах нормального потока документов, и вы можете отрегулировать их оттуда.

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