Fatal编程技术网
  • html/
  • Html 导航栏使用纯css重叠内容

Html 导航栏使用纯css重叠内容

html css

Html 导航栏使用纯css重叠内容,html,css,navbar,Html,Css,Navbar,我正在尝试使用html和css实现navbar。它工作良好，直到它被缩小到手机大小。这是问题开始的时候，单击右角的图标会导致它向下延伸很多，而不仅仅是链接结束的地方，这会导致它重叠并隐藏正文的内容 我曾尝试使用z-index，但没有效果，我发现其他解决方案使用jQuery，所以不确定如何应用它 <!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"

我正在尝试使用
html
和
css
实现
navbar
。它工作良好，直到它被缩小到手机大小。这是问题开始的时候，单击右角的图标会导致它向下延伸很多，而不仅仅是链接结束的地方，这会导致它重叠并隐藏正文的内容

我曾尝试使用
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;
  }
}


欢迎
关于我
Lorem ipsum dolor sit amet，ei pro deletus pertinax。这是一种不必要的、不必要的行为，是一种对抗性的行为。没有一点传奇色彩，这是一种令人憎恶的海洋动物，它的名字叫tritani mea。Albucius evertitur在cum中的定义


Lorem ipsum dolor sit amet，ei pro deletus pertinax。这是一种不必要的、不必要的行为，是一种对抗性的行为。没有一点传奇色彩，这是一种令人憎恶的海洋动物，它的名字叫tritani mea。Albucius evertitur在cum中的定义

2019年版权所有

@字符集“UTF-8”；
/*设置整个页面的背景*/
html{
背景色：#26734d；
滚动行为：平滑；
保证金：0；
填充：0；
宽度：100%；
高度：100%；}
/*--导航条开始--*/
* {
框大小：边框框；
}
身体{
边际：0px；
字体系列：“SegoeUI”；
}
.导航{
高度：50px；
宽度：100%；
背景色：#4D；
位置：相对位置；
}
.nav>.nav标题{
显示：内联；
}
.nav>.nav标题>.nav标题{
显示：内联块；
字体大小：22px；
颜色：#fff；
填充：10px 10px 10px 10px；
}
.nav>.nav btn{
显示：无；
}
.nav>.nav链接{
显示：内联；
浮动：中心；
字号：18px；
}
.nav>.nav links>a{
显示：内联块；
填充：13px 10px 13px 10px；
文字装饰：无；
颜色：#efefef；
文本转换：大写；
}
.nav>导航链接>a:悬停{
背景色：rgba（0,0,0,0.3）；
}
：任何链接{
颜色：#efefef；
文字装饰：无；
文本转换：大写；
字号：18px；
}
：任意链接：活动{背景色：rgba（0,0,0,0.3）}
.nav>导航检查{
显示：无；
}
/*--导航条末端--*/
.标题1{
颜色：#FFFFFF；
}
/*设置内容（正文）的样式*/
.内容{
上页边距：右；
文本对齐：左对齐；
字体系列：Arial、Helvetica、无衬线字体；
/*背景色：#3AAFA9；*/
填充：15px 25px；
文字装饰：无；
颜色：#FFFFFF；
字体大小：20px；
}
p{
颜色：#FFFFFF}
/*设置验证的样式*/
#验证{
文本对齐：居中；
填充：10px 10px；
}
/*设置页脚的样式*/
.页脚{
背景色：继承；
填充：2px；
文本对齐：居中；
颜色：#ffffff；
宽度：100%；
位置：绝对位置；
}
/*摆桌子*/
.csstable{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
字体风格：普通；
线高：正常；
背景色：#FFF；
边框顶部样式：实心；
右边框样式：实心；
边框底部样式：实心；
左边框样式：实心；
溢出：自动；
位置：相对位置；
高度：自动；
宽度：自动；
左：自动；
顶部：自动；
右：自动；
底部：自动；
}
/*设置图像的样式*/
美术馆副馆长{
宽度：100%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.反应迅速{
填充：0 6px；
浮动：左；
宽度：24.99999%；
}
@仅介质屏幕和（最大宽度：700px）{
.反应迅速{
宽度：49.99999%；
利润率：6px0；
}
}
@仅介质屏幕和（最大宽度：500px）{
.反应迅速{
宽度：100%；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*已将内容移到标题下方*/
.内容{
边缘顶部：50px；
}
身体{
边际：0px；
}
@介质（最大宽度：600px）{
.nav>.nav btn{
显示：内联块；
位置：绝对位置；
右：0px；
顶部：0px；
}
.nav>.nav btn>标签{
显示：内联块；
宽度：50px；
高度：50px；
填充：13px；
}
.nav>.nav btn>标签：悬停、.nav#nav检查：选中~.nav btn>标签{
背景色：rgba（0,0,0,0.3）；
}
.nav>.nav btn>标签>span{
显示：块；
宽度：25px；
高度：10px；
边框顶部：2个实心#eee；
}
.nav>.nav链接{
位置：绝对位置；
显示：块；
宽度：100%；
背景色：#333；
高度：0px；
过渡：所有0.3秒都容易进入；
溢出y：隐藏；
顶部：50px；
左：0px；
}
.nav>.nav links>a{
显示：块；
宽度：100%；
}
.nav>#导航检查：未（：已检查）~.nav链接{
高度：0px；
}
.nav>#导航检查：已检查~.nav链接{
高度：计算（100vh-50px）；
溢出y：自动；
}
}
只需将
高度设置为
自动


.nav > #nav-check:checked ~ .nav-links {
    height: auto;
    overflow-y: auto;
}


请参见此问题：


@media (max-width: 600px)
<style>
.nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
}


为此：


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


对于您的
.nav链接
类删除
位置：绝对
：


 .nav > .nav-links {
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
  }



您好，谢谢您的帮助，它起作用了，但当单击/点击右侧的复选框时，导航栏会重叠一些内容。如何使内容部分在“链接3”选项卡之后开始/向下移动，从而使其开始部分不被覆盖，整个页面向下移动。

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



 .nav > .nav-links {
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
  }