我的导航栏包含太多链接，因此我将它们放在下拉菜单中，但是下拉菜单消失在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饼图，为简单起见，只包含了导航栏和饼图。
答案 0 :(得分：1)
尝试这种方式：
.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>