主导div上方的HTML Nav

时间：2016-12-30 09:37:59

标签： javascript html css

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

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

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

＆＃13;
＆＃13; 
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", "");
    }
}
＆＃13; 
* {
    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;
}
＆＃13; 
<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%">
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

刚刚添加了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%">

答案 1 :(得分：1)

您可以使用float: left元素上的CSS属性position: absolute和.opennav来实现浮动图像前方的效果，而不是高于它...

修改 然后，要修复旁边显示的图标，只需将sidenav的z-index更改为998，将图标的z-index更改为997，以便图标显示在侧导航

＆＃13;
＆＃13; 
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", "");
  }
}
＆＃13; 
* {
  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: 998;
  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 {
  color: white;
  font-size: 24px!important;
  z-index: 995;
  float: left;
  position: absolute;
}
.closenav {
  color: white;
  font-size: 24px!important;
  z-index: 999;

}
＆＃13; 
<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%">
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

在.opennav，.closenav类的样式中添加position：absolute。

相关问题
最新问题