如何使用Bootstrap在同一HTML页面中添加互不重叠的全屏内容区块

你现有代码出现区块重叠的核心原因是给section内部的container设置了position: absolute属性，导致元素脱离正常文档流，同时没有给每个section设置满屏高度，才会出现堆叠覆盖的情况。要实现每个区块独立占满视口、互不重叠的效果，按以下方案修改即可：

修改要点：

• 给html标签添加h-100类，保证页面高度继承正常
• 所有section统一添加min-vh-100类，保证每个区块刚好占满一屏高度
• 移除所有section内部container的position: absolute属性，改用flex布局对齐内部的图片、文本内容，避免脱离文档流
• 后续新增区块直接复用相同的section结构，就会自动依次向下排列，不会和已有区块重叠

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 替换为你本地的bootstrap样式文件路径 -->
    <link rel="stylesheet" href="本地bootstrap.min.css路径">
    <title>示例页面</title>
</head>
<body class="h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--第一区块-->
    <section class="bg-dark d-flex align-items-center justify-content-center text-light p-5 p-lg-0 min-vh-100 position-relative">
        <div class="container">
            <div class="text-center">
                <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
            </div>
            <div class="position-absolute top-50 start-0 translate-middle-y ms-5">
                <h3 class="languages">About</h3>
            </div>
            <div class="position-absolute top-50 end-0 translate-middle-y me-5">
                <h3 class="languages">Langs</h3>
            </div>
        </div>            
    </section>
    <!--第二区块-->
    <section class="d-flex align-items-center justify-content-center min-vh-100 bg-light">
        <div class="container text-center">
            <svg class="svgOne mb-4" width="200" height="200" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="600" height="600" fill="#C4C4C4"/>
            </svg>
            <h1 class="textOne">Never regret anything that made you smile.</h1>
        </div>
    </section>
    <!--第三区块 后续新增区块直接按此结构编写即可-->
    <section class="d-flex align-items-center justify-content-center min-vh-100 bg-white">
        <div class="container text-center">
            <!-- 替换为你的本地图片路径 -->
            <img src="本地图片路径" alt="区块配图" class="mb-4">
            <h1>对应区块的文本内容</h1>
        </div>
    </section>
    <!-- 替换为你本地的bootstrap脚本文件路径 -->
    <script src="本地bootstrap.bundle.min.js路径"></script>
</body>
</html>

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