如何在 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 的元素來推送內容。