使用绝对定位图片时的Bootstrap网格对齐问题

你的核心问题是绝对定位元素导致父容器塌陷：position-absolute的图片会脱离文档流，所以.img-display这个相对定位的父容器没有高度，直接导致下方的选项区往上挤压，整体布局混乱。而你用relative+absolute实现图片叠加的思路是对的，只需要修复父容器的高度问题即可。

修复方案与修改后的代码 #

给角色展示容器设置固定宽高（匹配你的图片尺寸），同时用Bootstrap的布局类优化对齐和间距：

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="navbar">
                    navbar soon to be
                </div>
            </div>
        </div>
        <!-- 角色展示区：居中显示，设置固定宽高 -->
        <div class="row justify-content-center">
            <div class="col-auto">
                <div class="img-display position-relative" style="width: 400px; height: 500px;">
                    <img class="body-part position-absolute" id="body-section" src="/testImage/body_default.png" alt="Default Body" width="400px"/>
                    <img class="head-part position-absolute" id="head-section" src="/testImage/head_default.png" alt="Default Head" width="400px"/>
                    <img class="ears-part position-absolute" id="ears-section" src="/testImage/ears_default1.png" alt="Default Ears" width="400px"/>
                    <img class="eyes-part position-absolute" id="eyes-section" src="/testImage/eyes_default.png" alt="Default Eyes" width="400px"/>
                    <img class="mouth-part position-absolute" id="mouth-section" src="/testImage/mouth_default.png" alt="Default Mouth" width="400px"/>
                    <img class="nose-part position-absolute" id="nose-section" src="/testImage/nose_default.png" alt="Default Nose" width="400px"/>
                    <img class="eyebrows-part position-absolute" id="eyebrows-section" src="/testImage/eyebrows_default.png" alt="Default Eyebrows" width="400px"/>
                </div>
            </div>
        </div>
        <!-- 选项菜单区：添加间距，横向排列居中 -->
        <div class="row mt-4">
            <div class="col">
                <div class="options-menu">
                    <ul class="test1 d-flex justify-content-center gap-4">
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 选项按钮区：横向排列+自动换行，添加间距 -->
        <div class="row mt-3">
            <div class="col">
                <div class="options">
                    <ul class="test1 d-flex justify-content-center flex-wrap gap-3">
                        <li class="test"><button onclick="changeImage('/testImage/ears_default1.png')"><img src="/testImage/ears_default1.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default2.png')"><img src="/testImage/ears_default2.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default3.png')"><img src="/testImage/ears_default3.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default4.png')"><img src="/testImage/ears_default4.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default5.png')"><img src="/testImage/ears_default5.png" width="108px" height="192px"/></button></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>

关键修复细节 #

1. 给.img-display设置固定宽高：绝对定位元素不占文档流，父容器必须有明确高度才能撑起空间，避免下方元素塌陷。你可以根据实际图片的高度调整height值。
2. 用Bootstrap布局类优化排版：
   • justify-content-center让区块水平居中
   • col-auto让角色展示区仅占图片宽度，不强行拉伸
   • mt-4/mt-3给区块之间添加合理间距
   • d-flex/flex-wrap让选项横向排列，超出屏幕时自动换行
3. 保留图片叠加逻辑：relative+absolute实现层叠的方式完全可行，不需要改动。如果要确保所有图片精准对齐，可以给每个绝对定位的图片加top: 0; left: 0;样式。

额外建议 #

把内联样式移到单独的CSS文件中，方便后续维护和调整。

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