Bootstrap 5.3.2：如何实现按钮视觉重叠于折叠面板头部按钮？

直接给你可行的实现方案，核心是把图片按钮和折叠按钮同级放置在折叠头部内，用Bootstrap自带的定位类实现视觉对齐，既符合规范又不会触发折叠事件：

修改后的完整代码 #

<div class="accordion border-0 accordion-borderless">
    <div class="accordion-item border-0 pt-2 cs-bg-gray cs-text-gray">
        <!-- 给accordion-header添加position-relative作为定位容器 -->
        <h2 class="accordion-header border border-0 rounded m-0 cs-bg-gray pb-2 position-relative" id="heading"> 
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion{{.Id}}" aria-expanded="true" aria-controls="accordion{{.ID}}">
                <div class="d-flex w-100">
                    <div class="d-block w-100">
                        <span class="d-block">
                            Top span
                        </span>
                        <span class="cs-text-black d-block opacity-50 w-100" style="font-size: 14px; padding-top: 2px;">
                            Bottom span
                        </span>
                    </div>
                </div>
            </button>  
            <!-- 把图片按钮移到这里，和折叠按钮同级 -->
            <img class="btn position-absolute end-0 top-50 translate-middle-y" 
                 src="/static/copyIcon.png" 
                 style="width: 50px; z-index: 1;"
                 onclick="你的复制逻辑()">                                           
        </h2> 
   </div>
</div>

关键修改说明 #

• 定位容器：给accordion-header加position-relative，让绝对定位的按钮能以它为基准对齐
• 按钮定位：用position-absolute end-0 top-50 translate-middle-y这几个Bootstrap工具类，一键实现按钮靠右且垂直居中，不用手动调margin/padding
• 层级控制：给按钮加z-index: 1，确保它在折叠按钮上方，点击时不会触发下面的折叠事件
• 同级放置：按钮和折叠按钮同级，彻底避免嵌套导致的事件冒泡和HTML规范问题

这样实现后，按钮视觉上和原来的布局一致，但点击只会触发自己的逻辑，不会触发折叠面板的展开/收起。

内容的提问来源于stack exchange，提问作者soh3.e