如何让元素信息弹窗显示在页面所有元素之上？

核心问题 #

弹窗被面包屑和头部遮挡，不是z-index用法错误，而是堆叠上下文的限制：弹窗的父元素（元素框.popup）处于层级更低的堆叠上下文中，导致子元素的z-index再高也突破不了父级的堆叠层级；另外顶部的header/breadcrumb可能本身设置了较高的z-index。

解决步骤 #

1. 给弹窗（.popuptext）设置足够大的z-index值，确保超过顶部元素的层级：

.popuptext {
  position: absolute;
  /* 保留原有样式 */
  z-index: 9999; /* 数值需大于header和breadcrumb的z-index */
}

2. 检查弹窗的父元素（.popup），不要给它设置z-index属性；如果必须设置，要保证其z-index数值高于顶部header和breadcrumb的层级。
3. 确认顶部header和breadcrumb的z-index值，确保弹窗的数值比它们更大。

补充说明 #

代码顺序靠后确实会让元素在同一堆叠上下文中渲染在上方，但如果元素分属不同的堆叠上下文，这个规则就不适用。堆叠上下文由设置了position（非static）+z-index、transform、opacity等属性的元素创建，子元素会被限制在父级的堆叠上下文中。

你提供的相关HTML代码 #

<div class="d-flex justify-content-center">      
   <div class="vNumber" id="v1"><h6>1</h6></div>
<!-- HYDROGEN -->
   <div class="p-1 box reactiveNonMetals popup" id="Hydrogen" onClick="elemHydrogen()">
   <span class="popuptext" id="popup-hydrogen">
    Element: <span class="white"><a href="https://en.wikipedia.org/wiki/Hydrogen" onClick="window.open(this.href,'targetWindow',
                               `toolbar=no,
                                location=no,
                                status=no,
                                menubar=no,
                                scrollbars=yes,
                                resizable=yes,
                                width=750px,
                                height=500px`);
 return false;" class="type1">Hydrogen</a></span><br>
    Series: <span class="white">Reactive Nonmetals</span><br>
    Atomic Number: <span class="white">1</span><br>
    Energy Levels: <span class="white">1</span><br>
    Atomic Weight: <span class="white">1.008 u</span><br>
    Electronegativity: <span class="white">2.20</span><br>
    Melting Point: <span class="white">259.1&#176; C</span><br>
    Boiling Point: <span class="white">-252.9&#176; C</span><br>
    Electron Affinity: <span class="white">72.8 kJ/mol</span><br>
    Ionization: <span class="white">1,312.0 kJ/mol</span><br>
    Radius Calculated: <span class="white">53 pm</span><br>
    Hardness, Brinell: <span class="white">N/A MPa</span><br>
    Modulus, Bulk: <span class="white">N/A GPa</span><br>
    Conductivity, Thermal: <span class="white">0.1805 W/mK</span><br>
    Heat, Specific: <span class="white">14,300 J/kgK</span><br>
    Abundance, Universe: <span class="white">75%</span><br>
    Discovered: <span class="white">1766</span></span>
    <h6 class="atomicNumber">1</h6>
    <h6 class="energyLevels">1</h6>
    <h6 class="element"><a href="https://www.youtube.com/watch?v=6rdmpx39PRk" target="blank" class="gas">H</a></h6>
    <h6 class="commonName">Hydrogen</h6>
    <h6 class="atomicWeight">1.008</h6>
   </div><!-- CLOSES HYDROGEN -->

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