导航栏下拉消失在 canvasjs 图表后面

Question

我的导航栏有太多链接无法包含，所以我将它们放在下拉菜单中，但下拉菜单在 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 饼图，为了简单起见，只包含了导航栏和饼图。

Answer 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>

导航栏下拉消失在 canvasjs 图表后面

Navigation bar drop down disappearing behind canvasjs chart

javascript

html

css

canvasjs