React+Bootstrap5页面容器与封面图重叠问题求助

问题分析 #

你的封面图使用了position: absolute，该属性会让元素脱离正常文档流，导致父容器高度塌陷为0，后续的container-fluid容器会直接从页面顶部开始布局，自然和封面图重叠。另外，固定导航栏fixed-top也会遮挡页面顶部内容，需要一并处理。

修复步骤 #

1. 让封面图容器撑满视口高度 #

给包裹封面图的容器添加min-height: 100vh和position: relative，确保容器高度等于视口高度，把后续内容挤到封面图下方：

/* 在你的CSS中新增 */
.hero-container {
  min-height: 100vh;
  position: relative;
}

修改JSX中对应的容器类名：

<div className="container hero-container"> {/* 替换原class="container" */}
  <img className="bg-img img-fluid" src="./Crabscover.png" alt="封面图" />
  {/* 导航栏代码保持不变 */}
</div>

2. 处理固定导航栏的遮挡问题 #

固定导航栏悬浮在页面上方会遮挡顶部内容，给body添加顶部内边距，值等于导航栏高度（Bootstrap导航栏默认高度约56px）：

body {
  padding-top: 56px;
}

3. 可选：优化封面图显示范围 #

如果不想封面图被导航栏遮挡，可调整.bg-img的定位和高度：

.bg-img {
  /* 保留原有属性，修改以下两项 */
  top: 56px; /* 避开导航栏区域 */
  height: calc(100vh - 56px); /* 高度减去导航栏高度 */
}

修改后的完整代码片段 #

JSX部分 #

import logo from './logo.svg';
import './App.css';
import { Button, Cards } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function App() {
    return (
        <div className="App">
            <div className="container hero-container">
                <img className="bg-img img-fluid" src="./Crabscover.png" alt="封面图"></img>
                <nav className="navbar navbar-expand-lg navbar-dark fixed-top">
                    <div className="container">
                        <img src="./logo.png" width="30" height="30" alt="品牌logo"/>
                        <a className="navbar-brand" href="#">CrazyCrabs</a>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav ms-auto">
                            <li className="nav-item">
                            <a className="nav-link active" aria-current="page" href="#">首页</a>
                            </li>
                            <li className="nav-item">
                            <a className="nav-link" href="#">NFT发售</a>
                            </li>
                            <li className="nav-item">
                            <a className="nav-link" href="#">连接钱包</a>
                            </li>
                        </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div className="container-fluid">
                <div className="row">
                    <section className="text-light p-5 text-center text-sm-start " >
                        <div className="container">
                            <div className="d-sm-flex" >
                                <div >
                                    <p className="text-left">
                                        欢迎来到胖企鹅的世界。这是一个诞生于Web3的品牌，
                                        致力于培养创造力、自由精神与社区文化。胖企鹅品牌
                                        产出内容、周边商品、玩具与数字收藏品。
                                    </p>
                                </div>
                                <div>
                                    <img className="img-fluid" src="./cranking.png" alt="插图" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    );
}

export default App;

CSS部分 #

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-container {
  min-height: 100vh;
  position: relative;
}

.bg-img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  filter: brightness(0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

body {
  padding-top: 56px;
}

.body {
  width: 100%;
}

.footer {
  height: 100px;
  background-color: #277FD8;
  position: absolute;
  bottom: 0;
  width: 100%;
}

@media(min-width: 768px) {
  .news-input {
    width: 50%;
  }
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* 居中文字 */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 右下角文字块 */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

内容的提问来源于stack exchange，提问作者Adamante