html - 在具有 100% 高 css 元素的 html 页面中添加顶部导航栏

Question

我试图在我的 html 模板中添加一个导航栏，但它被高度 = 100% 的 map 覆盖。这是我的 map 样式:

#windyty {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="resources/css/bootstrap-3.3.6.min.css">
<link rel="stylesheet" href="resources/css/font-awesome-4.7.0.min.css">
<link rel="stylesheet" href="resources/css/bootstrap-social-4.12.0.css">
<link rel="stylesheet" href="resources/css/ie10-viewport-bug-workaround.css">
<link rel="stylesheet" href="resources/css/bootstrap-datetimepicker-4.17.37.min.css">
<link rel="stylesheet" href="resources/css/jquery.dataTables-1.10.12.min.css">
<link rel="stylesheet" href="resources/css/buttons.dataTables-1.2.2.min.css">
<link rel="stylesheet" href="resources/css/buttons.bootstrap-1.2.2.min.css">
<link rel="stylesheet" href="resources/css/leaflet-0.7.7.css">
<link rel="stylesheet" href="resources/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="resources/css/easy-button.css">
<link rel="stylesheet" href="resources/css/leaflet-sidebar.min.css">
<link rel="stylesheet" href="resources/css/styles-min-20170519174922.css">

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>


<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div id="windyty"></div>

我的导航栏仍然存在，但它被 map 覆盖了。如何添加始终可见的导航栏？如果这是微不足道的，我是编码新手，很抱歉。谢谢

Answer 1

这里是固定导航栏的代码。 更改是:1) 将 windyty 删除为绝对 2) 将 ul 标签设为固定

#windyty {
  height: 100%;
  width: 100%;
}

ul {
  position: fixed;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF50;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div id="windyty">
  <h1>abcdef</h1>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

希望此链接能帮助您制作固定导航栏。