html - 使用纯 CSS 的导航栏重叠内容

问题描述

我正在尝试实现一个navbarusing just htmland css。它工作正常，直到它缩小到移动尺寸。这是问题开始的时候，因为单击右上角的图标会导致它比链接结束的位置向下延伸很多，从而导致它重叠并隐藏正文的内容。
我尝试过使用z-index，但这并没有帮助，我发现使用其他解决方案，jQuery所以不知道如何应用它。
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="style.css" "text/css" rel="stylesheet">


<div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
      <a href="index.html" class="active">Home</a>
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>

  <div class="nav-links">
 <a href="#">LINK1</a>
<a href="#">LINK2</a>
<a href="#">LINK3</a>
  </div>
</div>

<div class="content">
<h1>Welcome</h1>
<h2>About Me</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, ei pro delectus pertinax. Ei est utinam delectus, nec ad debet deseruisse, eum labores adipisci adversarium ut. No vel accumsan legendos, duo numquam inermis petentium id. Ne sea veniam animal abhorreant, cu tale tritani mea. Albucius evertitur definitiones in cum. </p>
<p>
Lorem ipsum dolor sit amet, ei pro delectus pertinax. Ei est utinam delectus, nec ad debet deseruisse, eum labores adipisci adversarium ut. No vel accumsan legendos, duo numquam inermis petentium id. Ne sea veniam animal abhorreant, cu tale tritani mea. Albucius evertitur definitiones in cum.</p>


</div>
<div class="responsive">
<div class="gallery">
<img src="main.jpg" alt="Picture"> 
</div>

<div class="footer">
<p><span>Copyright @ 2019</span></p>
</div>
</html>




@charset "UTF-8";

/*set background for whole page*/
html {
  background-color: #26734d; 
   scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;}
    /*--start of nav bar--*/

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui'; 
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {

  display: none;
}

.nav > .nav-links {
  display: inline;
  float: center;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
   text-transform: uppercase;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
:any-link {
color: #efefef; 
text-decoration: none;
   text-transform: uppercase;
  font-size: 18px;

}
:any-link:active { background-color: rgba(0, 0, 0, 0.3) }

.nav > #nav-check {
  display: none;
}


/*--end of nav bar--*/

.heading1{
color:#FFFFFF;
}

/* Style the content(body) */
.content {
 margin-top: right;
text-align:left;
   font-family: Arial, Helvetica, sans-serif;
 /*  background-color: #3AAFA9;*/ 
 padding: 15px 25px;
  text-decoration: none;
  color:#FFFFFF;
  font-size: 20px;
}
p{
   color:#FFFFFF}


/* Style the validation */
#validation{
  text-align:center;
    padding: 10px 10px;   

}

/* Style the footer */
.footer {
background-color: inherit;
  padding: 2px;
  text-align: center;
  color:#ffffff;
    width: 100%;
    position: absolute;

}

/* Style the table */
.csstable {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  line-height: normal;
  background-color: #FFF;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  overflow: auto;
  position: relative;
  height: auto;
  width: auto;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
}

/*style the images*/
div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;

  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* Moved Content Below Header */
.content {
margin-top:50px;
}



body {
margin:0px;
}


@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}
标签： htmlcssnavbar
html - 使用纯 CSS 的导航栏重叠内容

问题描述

解决方案

推荐阅读
