В моей панели навигации было слишком много ссылок для включения, поэтому я поместил их в выпадающее меню, но выпадающее меню исчезает за графиками, созданными 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 и включил только навигационную панель и круговую диаграмму для простоты.