我有一个Bootstrap 4模式与一对夫妇的按钮，其中一个是应该切换自定义popover div，这是下面的按钮，触发它的中心。弹出框样式在不在模态中时工作正常，但模态的某些方面导致弹出框被部分隐藏。
我尝试了overflow:和z-index:风格的几种变体，似乎无法解决这个问题。
我怎样才能让弹出框在相对于“按钮1”按钮的当前位置完全可见？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal" tabindex="-1" data-backdrop="static" data-keyboard="false" data-show="false" data-focus="true" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <!-- Modal Header -->    
      <div class="modal-header" style="margin-bottom: 0px; padding: 0.5rem 1rem; border-bottom: 0px; background-color: rgb(248, 249, 252);">
        <h5 class="modal-title text-center">
          Title Here
        </h5>
        <button type="button" class="close"><span aria-hidden="true">&#215;</span></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body" style="padding: 0px; max-height: 80vh; overflow: auto;">
        <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;">
          <div style="margin: 0.5em; padding: 0px;">
            Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
          </div>
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
          
          <!-- Modal Buttons --> 
          <div class="row">
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted user-comm-react-btn">Button 1</button>
              
              <!-- Button 1 Popover Div --> 
              <div class="text-center bg-light shadow" style="position: absolute; width: fit-content; margin: 0px auto; border-radius: 2em; left: 50%; transform: translateX(-50%); z-index: 999; white-space: nowrap; border: 1px solid rgb(227, 230, 240);">
                Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
              </div>
              
            </div>
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted">Button 2</button>
            </div>
          </div>
          
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer" style="padding: 0.25em; border-top: medium;z-index: 4;">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
      </div>
      
    </div>
  </div>
</div>