我的导航栏在幻灯片下方。我想结束，但我想不通。我尝试了一些绝对和相对位置，但它不起作用。请找到我的解决方案，如果你有时间给我一个合乎逻辑的解释。
我的html页面
<!DOCTYPE>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" type="text/css" href="all.css">
<title>
</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"</script>
<!Daca e IE><script src="http://html5shim.googlecode.com/svn/trunk/htm5.js"></script><!End>
</head>
<body>
<nav>
<a href="#">Logo</a>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Colections</a>
<a href="#">Philosophy</a>
<a href="#">Contact</a>
<a href="#">Facebook</a>
</nav>
<div class="cycle-slideshow">
<img src="images/233H.jpg" alt="blabla">
<img src="images/233H1.jpg" alt="blabla">
<img src="images/233H2.jpg" alt="blabla">
</div>
</body>
<footer>
</footer>
</html>
我的CSS页面
img {
max-width: 100%;
}
.cycle-slideshow {
width: 100%;
max-width: 2000px;
}
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
}
nav a {
display: inline-block;
text-decoration: none;
font-family: verdana;
font-size: 14px;
color: rgb(239,239,239);
margin: 15px 32px 0 32px;
}
nav a:hover {
color: pink;
最佳答案
为此使用 z-index 属性
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
z-index:10;
}
如果还使用了 slider ，则使用最大值
z-index
关于html - 我的导航栏在幻灯片下方。我想结束，但我想不通，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34172138/