我有一个包含多个 Google 图表的页面。我有一个 CSS 悬停下拉图例，它位于屏幕顶部。但问题是谷歌图表出现在下拉列表的顶部。我已将下拉 div 的 z-index 设置得非常高。我还使用 Javascript 在页面加载后执行 innerHTML，以便在图表之后创建下拉列表。如果我也先创建下拉菜单，它会做同样的事情。
我不明白这是否是 Google Charts 中的优先事项，或者是否有一些我不知道的“操作顺序”。我在这方面不是经验丰富的老手。
您可以看到我将下拉菜单的 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>
最佳答案
谢谢@zgood!
没想到图例本身的div容器。
<div id="legend" style="position: fixed; left: 0; top: 0; z-index: 10;">
马上修复它!
关于html - 谷歌图表的 Z-index 和页面上的其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49239447/