html - 如何使popover div / element / section出现在所有元素/ div / section的顶部

Question

我们正在开发一个开源 Chrome 扩展程序：Digital Assistant Client

我正在尝试在不使用任何纯 CSS 扩展的情况下实现自定义弹出框模式样式。我在将其显示在任何其他元素/div/部分之上时遇到问题。当在弹出模式中调用 css 时，弹出框会低于该模式。我怎样才能让它出现在页面上任何其他元素的顶部？我已将 z-index 定义为最高数字，但它仍然不起作用。我尝试将位置参数定义为“绝对/相对”

预期的输出应该是这样的，并且代码在 bootstrap 中运行良好： Bootstrap output

在某些页面中变得像这样 其他弹出输出

引导程序的工作代码：codepen

$('#exampleModal').modal('show');

:root {
  --uda-primary-color: #303f9f;
  --uda-secondary-color: #ff5722;
  --uda-card-bgcolor: #f2f4fe;
  --uda-text-color: #000;
  --uda-footer-srchbtn-bgcolor: #dce0f7;
  --uda-text-color-bg-white: #fff;
  --uda-boxshodow-color: #e0e0e0;
}

/* tooltip css classes */
.uda-tooltip {
    display:inline-block;
    position:relative;
    /*text-align:center;*/
}

.uda-tooltip-text-content{
    visibility: visible;
    position: absolute;
    min-width:200px;
    max-width:400px;
    background-color: var(--uda-card-bgcolor);
    color: var(--uda-primary-color);
    text-align: center;
    padding: 10px;
    border-radius:8px; 
    z-index:99999999;
    transition: opacity .6s;
    box-shadow:0 1px 16px var(--uda-boxshodow-color);
}

.uda-tooltip-right::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent var(--uda-footer-srchbtn-bgcolor) transparent transparent;
}
.uda-tooltip-right {
    top: 50%;
    left: 100%;
    margin-left: 20px;
    transform: translate(0px, -50%);
}
.uda-tooltip-top {
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -50%;
}
.uda-tooltip-top::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: rotate(-90deg) !important;
    border-width: 12px;
    border-style: solid;
    transform: translate(0, -50%);
    border-color: transparent var(--uda-footer-srchbtn-bgcolor) transparent transparent;
}
.uda-tooltip-bottom {
    top: 100%;
    left: 50%;
    margin-top: 15px;
    margin-left: -50%;
}
.uda-tooltip-bottom::after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: rotate(90deg);
    margin-top: -12px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent var(--uda-footer-srchbtn-bgcolor) transparent transparent;
}
.uda-tooltip-left {
    top: 50%;
    right: 100%;
    margin-right: 20px;
    transform: translate(0px, -50%);
}
.uda-tooltip-left::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: rotate(180deg);
    margin-top: -12px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent var(--uda-footer-srchbtn-bgcolor) transparent transparent;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group uda-tooltip">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            <div class="uda-tooltip-text-content uda-tooltip-top">Please input the value and then click on<br><button class="uda-tutorial-btn" style="margin-top:10px; margin-right: 5px;" type="button" uda-added="true" onclick="UDAPluginSDK.resumePlay();">Continue</button><button class="uda-tutorial-exit-btn" style="margin-top:10px;" type="button" uda-added="true" id="uda-autoplay-exit">Exit</button></div>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

标签： htmlcssuser-interfacecss-selectors