创建重叠 div答案

【问题标题】：Creating overlapping divs创建重叠 div
【发布时间】：2020-04-28 14:24:27
【问题描述】：

我正在尝试重新创建一个设计，但是我在覆盖部分遇到了问题。我的想法是为菜单栏设置一个 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;

【问题讨论】：

只使用图片作为背景图片？
我认为使用 css 将地球图像设置为背景会更容易处理。
无论是背景图片建议，还是使用 css/scss 来定位元素，使父级相对和子级相对，并使用 z-index 将它们放在需要的位置。

标签： css reactjs flexbox

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

结果

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

【讨论】：