如何让我的弹出窗口出现在所有其他元素之上？

Question

在 JSFiddle 示例中，如果单击一个元素框（而不是字母本身），则会打开一个弹出窗口，其中显示有关该元素的更多信息。如果单击顶部元素之一（例如，氢），弹出窗口将隐藏在面包屑和标题元素后面，我希望弹出窗口位于所有其他元素的顶部，以便可以显示信息。

我尝试使用明显的 z-index 进行分层，并尝试确保我正确使用它，但我的弹出窗口仍然被顶部的两个 div 遮挡。我认为出现在其他代码下方的代码无论如何都会呈现在顶部？

这是我的 JSFiddle 示例。有人可以帮我解决这个问题吗？ https://jsfiddle.net/jasonbruce/chqpg4dt/8/

'''

    <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 -->

'''

Answer 1

你的 .fixed-top 类的 z-index 为 1030，而你的弹出窗口的 z-index 为 999，这就是你的问题...检查 devTools 中的代码并更改那里的 z-index 值...所以您可以准确地看到在代码中更改值的位置。