javascript - 导航栏下拉消失在 canvasjs 图表后面
问题描述
我的导航栏包含太多链接,因此我将它们放在下拉菜单中,但下拉菜单消失在 canvasjs 生成的图形后面。我需要下拉菜单出现在图像上。
我尝试弄乱 z 值,它没有修复它,但也许我对 canvasjs 一半做错了......?
<html>
<head>
<style>
.navbar-top {
margin: 0; padding: 0;
width: 100%;
top:0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
exportEnabled: true,
animationEnabled: true,
title: {
text: "Desktop Browser Market Share in 2016"
},
data: [{
type: "pie",
startAngle: 25,
toolTipContent: "<b>{label}</b>: {y}%",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}%",
dataPoints: [
{ y: 51.08, label: "Chrome" },
{ y: 27.34, label: "Internet Explorer" },
{ y: 10.62, label: "Firefox" },
{ y: 5.02, label: "Microsoft Edge" },
{ y: 4.07, label: "Safari" },
{ y: 1.22, label: "Opera" },
{ y: 0.44, label: "Others" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div class="navbar-top">
<ul>
<li><a href="/airlineStaff/homePageStaff">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Add Info</a>
<div class="dropdown-content">
<a href="/airlineStaff/addFlight">Add New Flights</a>
<a href="/airlineStaff/addAirplane">Add New Airplane</a>
<a href="/airlineStaff/addAirport">Add New Airport</a>
<a href="/airlineStaff/addPhoneNumber">Add Phone Number</a>
</div>
</li>
<li class="dropdown">
<a class="active" href="javascript:void(0)" class="dropbtn">View Pages</a>
<div class="dropdown-content">
<a href="/airlineStaff/staffViewFlights">View Flight Schedule</a>
<a href="/airlineStaff/viewAgents">View Booking Agents</a>
<a href="/airlineStaff/viewFreqCustomers">View Frequent Customers</a>
<a href="/airlineStaff/viewReports">View Reports</a>
<a class="active" href="/airlineStaff/revenueEarned">View Revenue Earned</a>
<a href="/airlineStaff/topDestinations">View Top Destinations</a>
</div>
</li>
<li><a href="/airlineStaff/changeFlightStatus">Change Flight Status</a></li>
<li style="float:right"><a href="/logout">Logout</a></li>
</ul>
</div>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
{% if error %}
<p class="error"><strong>Error:</strong> {{error}}</p>
{% endif %}
</body>
</html>
下拉菜单很好地显示在文本上,我想我已经正确排序了。我把标准的canvasjs饼图放回去了,为了简单起见,只包括了导航栏和饼图。
解决方案
试试这个方法:
.navbar-top {
margin: 0; padding: 0;
width: 100%;
top:0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: false, // change to true
title:{
text: "Basic Column Chart"
},
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div class="navbar-top" style="z-index: 20000 !important;">
<ul>
<li><a href="/airlineStaff/homePageStaff">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Add Info</a>
<div class="dropdown-content">
<a href="/airlineStaff/addFlight">Add New Flights</a>
<a href="/airlineStaff/addAirplane">Add New Airplane</a>
<a href="/airlineStaff/addAirport">Add New Airport</a>
<a href="/airlineStaff/addPhoneNumber">Add Phone Number</a>
</div>
</li>
<li class="dropdown">
<a class="active" href="javascript:void(0)" class="dropbtn">View Pages</a>
<div class="dropdown-content">
<a href="/airlineStaff/staffViewFlights">View Flight Schedule</a>
<a href="/airlineStaff/viewAgents">View Booking Agents</a>
<a href="/airlineStaff/viewFreqCustomers">View Frequent Customers</a>
<a href="/airlineStaff/viewReports">View Reports</a>
<a class="active" href="/airlineStaff/revenueEarned">View Revenue Earned</a>
<a href="/airlineStaff/topDestinations">View Top Destinations</a>
</div>
</li>
<li><a href="/airlineStaff/changeFlightStatus">Change Flight Status</a></li>
<li style="float:right"><a href="/logout">Logout</a></li>
</ul>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
</body>
</html>
推荐阅读
- vue.js - 当我在我的 mac 机器上运行“npm install”命令时,出现以下错误
- extjs - 如何在父网格数据的基础上,将网格插入到网格中?
- python - 如何使用 Keras 中的 Conv2D 在 5D 张量的最后三个维度上应用卷积?
- python-3.x - TypeError:在进行网页抓取时
- windows - Pygame的窗口打开而不是立即关闭,为什么?
- java - tycho surefire 的附加捆绑包
- android - Kotlin Jacoco 覆盖未显示 Android 中的静态方法(伴侣)
- python - 方法中的参数过多错误,只有一个必需参数
- javascript - 进行开玩笑测试时脚本(从脚本标签调用)不可用
- c - CHIP-8 模拟器无法按预期呈现图形