Question

我有一个包含多个Google Charts的页面。我有一个CSS悬停下拉图例，它位于屏幕顶部。但问题是谷歌图表出现在下拉列表的顶部。我已经设置了dropdown div的z-index非常高。我还在页面加载后使用Javascript来执行innerHTML，以便在图表之后创建下拉列表。如果我首先创建下拉列表，它也会做同样的事情。

我不明白这是否是谷歌图表中优先考虑的内容，或者是否存在一些我不知道的“操作顺序”。我不是一个经验丰富的老将。

你可以看到我为下拉列表设置的z-index非常高。然后，我将Google Chart的div容器的z-index设置为高负数。我试过两个div，但都不重要。

我已经收录了相关的HTML，非常感谢任何见解！我确信这很简单，我对此并不熟悉。

<head>
<style>
    .tooltip {
        position: relative;
        display: block;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 350px;
        background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
        top: -5px;
        left: 90%;

        /* Position the tooltip */
        position: absolute;
        z-index: 2147483640;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }


.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    font-size:12px;
}

.dropdown:hover .dropdown-content {
    display: block;
    z-index: 2147483647;
}   
</style>
</head>
<body>
<div id="legend" style="position: fixed; left: 0; top: 0;">

</div>
<br>
<div style="width: 920px; height: 600px; margin: auto; border: 2px solid #a3c3f7; border-radius: 20px;padding:20px;  z-index: -100000;">
    <div id="C05" style="width: 900px; height: 570px; margin: auto;"></div>
</div>
<script>
        document.getElementById("legend").innerHTML = "<div class=\"dropdown\""><b>LPT LEGEND</b><div class=\"dropdown-content\"><p>0100blahblahblah</p></div></div>";
</script>
</body>
</html>

Answer 1

谢谢@zgood！

我没有想到传说本身的div容器。

<div id="legend" style="position: fixed; left: 0; top: 0; z-index: 10;">

修正了它！

页面

1 个答案: