javascript - 主 div 上方的 HTML 导航

所以我从 W3 学校得到了一个 sidenav，它的工作原理和我想要的一样。但是我无法让菜单图标覆盖我页面上的其他内容。它只是在上面。我也做过绝对定位，但没有成功。如果我这样做，导航栏显示错误。

任何建议都会有所帮助。我包含了一个代码片段。

所以我希望 sidenav 图标位于图片的顶部。

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}

function myAccFunc() {
    var x = document.getElementById("demoAcc");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace(" w3-green", "");
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

BODY {
    font-family: FuturaLight;
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

.margin {
    margin-left: 20%;
    margin-right: 20%;
}

.sidenav {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
    position: relative;
    -webkit-animation: animateleft 0.4s;
    animation: animateleft 0.4s;
    color: #fff !important;
    background-color: #616161 !important;
}

.sidenav a{
    display: block;
}

.accordion {
    width: 100%;
    cursor: pointer;
}

.opennav:hover, .closenav:hover {
    cursor: pointer;
    opacity: 0.8;
    font-size:24px!important
}

.opennav, .closenav {
    color: inherit;
    font-size:24px!important;
    z-index:999;
}

<BODY>
  <nav class="sidenav" style="display:none" id="mySidenav">
    <a href="javascript:void(0)" onclick="w3_close()"
       class="closenav">Sluiten &times;</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <div class="accordion">
        <a onclick="myAccFunc()" href="#">
            Accordion <i class="fa fa-caret-down"></i>
        </a>
        <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
</nav>

<span class="opennav" onclick="w3_open()">&#9776;</span>
  
    <img src="http://static.nationalgeographic.nl/uploads/media/image/photo-ark-alle-dieren-verzameld-foto-van-de-dag.jpg" style="width:100%">

最佳答案

刚刚添加了 position: absolute;，它的行为就像你想要的那样。

更改了 img 标签的样式，现在看起来不错。

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}

function myAccFunc() {
    var x = document.getElementById("demoAcc");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace(" w3-green", "");
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

BODY {
    font-family: FuturaLight;
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

.margin {
    margin-left: 20%;
    margin-right: 20%;
}

.sidenav {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
    position: relative;
    -webkit-animation: animateleft 0.4s;
    animation: animateleft 0.4s;
    color: #fff !important;
    background-color: #616161 !important;
}

.sidenav a{
    display: block;
}

.accordion {
    width: 100%;
    cursor: pointer;
}

.opennav:hover, .closenav:hover {
    cursor: pointer;
    opacity: 0.8;
    font-size:24px!important
}

.opennav, .closenav {
    color: inherit;
    font-size:24px!important;
    z-index:999;
    color: #ffffff;
}

img {
    position: absolute;
    left: 0;
    z-index: -99999;
}

<BODY>
  <nav class="sidenav" style="display:none" id="mySidenav">
    <a href="javascript:void(0)" onclick="w3_close()"
       class="closenav">Sluiten &times;</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <div class="accordion">
        <a onclick="myAccFunc()" href="#">
            Accordion <i class="fa fa-caret-down"></i>
        </a>
        <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
</nav>

<span class="opennav" onclick="w3_open()">&#9776;</span>
  
    <img src="http://static.nationalgeographic.nl/uploads/media/image/photo-ark-alle-dieren-verzameld-foto-van-de-dag.jpg" style="width:100%">

关于javascript - 主 div 上方的 HTML 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41393902/

javascript - 主 div 上方的 HTML 导航

上一篇：javascript - 如何使用 laravel 数据库在 javascript 中使用 php 代码

下一篇：javascript - Knockout.js 返回未定义