如何在 ReactJS 中使用 CSS 在背景图像后设置 h1

Question

让我解释一下我需要做什么。

我设置了一个 header 图像，如下所示。

这是react代码和相关的css

HeaderImage.jsx

import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";

class HeaderImage extends Component {
  render() {
    return (
      <div className="container-fluid">
        <div id="header-photo" className="header-text-wrapper">
          <div
            className="img-responsive header"
            src="../images/header2.jpg"
          ></div>
        </div>

        <div className="header-text">
          <div className="row">
            <div className="col-sm-12 col-12 col-md-12">
              <h2>Hi!, I am Sneha :)</h2>
            </div>
          </div>
        </div>
        <hr />
      </div>
    );
  }
}

export default HeaderImage;

这是custom.css我用来在其上设置此 header 图像和文本的样式

.header {
  position: fixed;
  top: 0;
  /* left: 0; */
  height: 100px;
  min-height: 600px;
  background: url("../images/flower.jpg") no-repeat top center;
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  width: 100%;
  overflow: hidden;
  background-size: 100% auto;
}

.texts-on-header {
  color: white;
}


.header-text-wrapper {
  position: relative;
  top: 20% !important;
  margin-top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h2 {
  font-size: 3.4em;
  color: white;
  font-family: "Cherry Swash", cursive;
}

.header-text {
  position: absolute;
  top: 40%;
  left: 32.5%;
  transform: translateY(-50%);
}

稍后在HeaderImage.jsx中调用这个App.js ，如下所示。

import React, { Fragment } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/custom.css";

import NavigationBar from "./pages/NavBar";
import HeaderImage from './pages/HeaderImage'

function App() {
  return (
    <Fragment>
      {/* <NavigationBar /> */}
      
      <HeaderImage/>

      <h1>Welcome</h1> ----------------> this is not showing right below the HeaderImage, but behind the HeaderImage
      
    </Fragment>
  );
}

export default App;

现在我的问题是：当我尝试像上面那样添加一些其他内容时<h1>Welcome</h1> ot 并没有显示在HeaderImage的正下方。 它总是在HeaderImage后面添加。 我怎么知道这个？ 我评论了HeaderImage部分，我可以看到它如下所示：

Answer 1

您的.header定位fixed ，等等更高的z-index （覆盖级别）。 这就是为什么您的内容落后于 header。 移除position: fixed; 或者创建一个高度等于 Header 的元素来推送内容。