Question

我的导航栏位于幻灯片下方。我想要它，但我无法弄清楚。我尝试了一些绝对和相对的立场，但它并没有。工作。请找到我的解决方案，如果你有时间给我一个合理的解释。

我的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;

Answer 1

导航位置被忽略，因为它被设置为 fixed 。要解决此问题，请向幻灯片添加填充，该填充等于导航的高度。

.cycle-slideshow{
    padding-top: 45px;
}

Answer 2

为此

使用z-index属性

nav {
  position: fixed;
  text-align: center;
  width: 100%;
  height: 45px;
  background-color: black;
  opacity: 0.8;
  z-index:10;
}

如果使用了滑块，则使用最大值

z索引

我的导航栏在幻灯片下。我想要它，但我无法弄清楚

2 个答案: