内容 DIV 后面的导航下拉菜单

【问题标题】：Navigation Dropdowns Behind Content DIV内容 DIV 后面的导航下拉菜单
【发布时间】：2020-04-11 19:04:06
【问题描述】：

我将代码张贴在我的 codepen 上。我想要做的是移动导航链接后面的黄色内容框。我有两个不同的导航栏。一种用于移动设备，一种用于台式机。在桌面和移动设备上单击下拉菜单时，它们似乎位于内容 DIV 的后面。我尝试了一些没有运气的事情。这个网站是实验性的，但我只是卡住了。任何帮助将非常感激。如果您需要更多信息，请询问。谢谢你。。

链接： Codepen

代码：

body {
  background-color: #000;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 711px) {
  .linkwrapm {
    background-color: #fff;
    height: 50px;
    margin-top: -16;
    width: 100%;
    text-align: left;
    padding-top: 11px;
  }
  .centerm {
    position: absolute;
    left: 45%;
    top: 14%;
    ;
  }
  .bannerm {
    background-color: #fff;
    height: 58px;
    padding-top: 9px;
    padding-bottom: 19px;
    background-size: 300px 60px;
    background-repeat: no-repeat;
  }
  .navbartextm {
    background-color: #fff;
    color: grey;
    font-size: 27px;
    text-align: left;
    padding-left: 12px;
    font-weight: bold;
  }
  /* mobile menu*/
  .navm {
    padding-left: 45px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 9px;
    background-color: #eeeeee;
    color: black;
    font-size: 20px;
  }
  /*Func*/
  .multi-level,
  .item ul,
  .nav input[type="checkbox"] {
    display: none;
  }
  #menu:checked~.multi-level,
  .item input:checked~ul {
    display: block;
  }
  /*Arrow*/
  .arrow {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    float: left;
    z-index: 0;
    margin: 17px 1em 0 2em;
  }
  .item input+.arrow {
    transform: rotate(-810deg);
    /*default 90deg*/
    transition: 0.4s;
    /*Default 2s*/
  }
  .item input:checked+.arrow {
    transform: rotate(0deg);
    transition: 0.2s;
  }
  /*Styles*/
  label:hover {
    cursor: pointer;
    color: black;
    font-size: 20px;
  }
  label {
    width: 100%;
    display: block;
    z-index: 3;
    position: relative;
    font-size: 20px;
  }
  .nav {
    width: 68%;
    background-color: white;
    overflow-x: hidden;
  }
  #nav-icon {
    font-size: 45px;
    line-height: 50px;
    padding-left: 2em;
    color: black;
    background-color: #fff;
  }
  #nav-icon:hover {
    color: #A9A9A9;
  }
  .nav ul,
  .nav li,
  label {
    line-height: 40px;
    margin: 0;
    padding: 0 -1em;
    list-style: none;
    text-decoration: none;
    color: #A9A9A9;
    font-weight: 100;
    width: 100%;
  }
  .item ul {
    padding: 0 0.25em;
    border-bottom: 1px solid gray;
  }
  .nav li a {
    line-height: 50px;
    margin: 0;
    padding: 0 4em;
    list-style: none;
    text-decoration: none;
    color: #000000;
    font-weight: 100;
  }
  .nav li a:hover {
    color: #A9A9A9;
  }
  /* mobile menu end*/
  .banner {
    display: none !important;
  }
  /* Full Dropdown Hide */
  .dropdown {
    display: none !important;
  }
  .dd-button {
    display: none !important;
  }
  .dd-button:after {
    display: none !important;
  }
  .dd-button:hover {
    display: none !important;
  }
  .dd-input {
    display: none !important;
  }
  .dd-menu {
    display: none !important;
  }
  .dd-input+.dd-menu {
    display: none !important;
  }
  .dd-input:checked+.dd-menu {
    display: none !important;
  }
  .dd-menu li {
    display: none !important;
  }
  .dd-menu li:hover {
    display: none !important;
  }
  .dd-menu li a {
    display: none !important;
  }
  .dd-menu li.divider {
    display: none !important;
  }
  /* Full Dropdown Hide End */
}

@media only screen and (min-width: 712px) {
  .linkwrapm {
    display: none !important;
  }
  .bannerm {
    display: none !important;
  }
  .linkwrap {
    background-color: #fff;
    height: 50px;
    margin-top: -20px;
    width: 100%;
    text-align: left;
    padding-top: 10px;
  }
  .banner {
    background-color: #fff;
    height: 60px;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  /* Full Navigation*/
  a {
    text-decoration: none;
    color: #000000;
  }
  a:hover {
    color: #222222;
  }
  /* Dropdown */
  .dropdown {
    display: inline-block;
    position: relative;
    margin-left: 10;
  }
  .dd-button {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
  }
  .dd-button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
  }
  .dd-button:hover {
    background-color: #eeeeee;
  }
  .dd-input {
    display: none;
  }
  .dd-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    list-style-type: none;
  }
  .dd-input+.dd-menu {
    display: none;
  }
  .dd-input:checked+.dd-menu {
    display: block;
  }
  .dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
  }
  .dd-menu li:hover {
    background-color: #f6f6f6;
  }
  .dd-menu li a {
    display: block;
    margin: -10px -20px;
    padding: 10px 20px;
  }
  .dd-menu li.divider {
    padding: 0;
    border-bottom: 1px solid #cccccc;
  }
  /* Full Navigation*/
}


/* CONTENT*/

.wrapper {
  background-color: yellow;
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  color: white;
  padding: 0;
}

.content {
  background-color: yellow;
  width: 23px;
  clear: both;
}


/* CONTENT*/
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src "script.js">
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="banner">
    <img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">
  </div>
  <div class="bannerm">
    <img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">
  </div>
  <div class="linkwrapm">
    <div class="nav">
      <input type="checkbox" id="menu" />
      <label for="menu" id="nav-icon">&#9776;</label>
      <div class="multi-level">
        <div class="item">
          <br>
          <div class="navm">Navigation </div>
          <BR>
          <input type="checkbox" id="A" />
          <img src="images/Arrow.png" class="arrow"><label for="A">Services</label>

          <ul>
            <li><a href="#">Branding</a></li>
            <li><a href="#">Web/App Development</a></li>
            <li><a href="#">Internet Marketing and SEO</a></li>
          </ul>
        </div>
        <div class="item">
          <input type="checkbox" id="B" />
          <img src="images/Arrow.png" class="arrow"><label for="B">Jobs</label>

          <ul>
            <li>
              <div class="sub-item">
                <input type="checkbox" id="B-A" />
              </div>
            </li>
            <li>
              <div class="sub-item">
                <input type="checkbox" id="B-B" />
              </div>
            </li>
            <li><a href="#">Graphic Designer</a></li>
            <li><a href="#">Logo Designer</a></li>

          </ul>
        </div>
        <div class="item">
          <input type="checkbox" id="C" />
          <img src="images/Arrow.png" class="arrow"><label for="C">About Us</label>

          <ul>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Our Work</a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
  <div class="linkwrap">
    <label class="dropdown">
  <div class="dd-button">
    Dropdown
  </div>
  <input type="checkbox" class="dd-input" id="test">
  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>
</label>
    <label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>
  
</label>
    <label class="dropdown">
  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>
  
</label>
    <label class="dropdown">
  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>
  
</label>
    <label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>
  
</label>
  </div>
  <div class="wrapper">
    hi
  </div>
  <div class="content">
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

【问题讨论】：

  • 你能把你的代码贴在这里而不是外部网站吗？

标签： javascript html css css-selectors placement


【解决方案1】：

## 最终答案##

改变你的包装器 z-index

    .wrapper{
  width: 100vw;
  background-color:yellow;
    z-index: -10;
  position: absolute;
  margin: 0 auto;
    height: 120px;
    color: white;
    padding: 0;
}


body {
	background-color:#000;
	 overflow:hidden;
      font-family: Georgia, "Times New Roman", serif;
	     font-family: helvetica, sans-serif;
	    margin: 0;
		 padding: 0;

}







@media only screen and (max-width: 711px) {



.linkwrapm{

    background-color:#fff;
    height:50px;
	margin-top: -16;
	width:100%;
    text-align:left;
	padding-top:11px;


}






.centerm{
	 position: absolute;
  left: 45%;
  top: 14%;;

}







.bannerm{

    background-color:#fff;
    height:58px;
	padding-top: 9px;
	padding-bottom:19px;
    background-size: 300px 60px;
	background-repeat: no-repeat;
}






.navbartextm{

    background-color:#fff;
    color:grey;
	font-size:27px;
	text-align:left;
	padding-left:12px;
    font-weight: bold;

}




/* mobile menu*/




.navm{
   padding-left:45px;
    font-weight: bold;
	text-align:left;
    margin:0;
	padding-top:8px;
	padding-bottom:9px;
	background-color:#eeeeee;
	color:black;
	font-size:20px;

}




/*Func*/

.multi-level, .item ul, .nav input[type="checkbox"] {
    display: none;
}
#menu:checked ~ .multi-level, .item input:checked ~ ul {
    display: block;
}

/*Arrow*/

.arrow {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    float: left;
    z-index: 0;
    margin: 17px 1em 0 2em;

}
.item input + .arrow {
    transform: rotate(-810deg);   /*default 90deg*/
    transition: 0.4s;   /*Default 2s*/
}




.item input:checked + .arrow {
    transform: rotate(0deg);
    transition: 0.2s;

}



/*Styles*/

label:hover {
    cursor: pointer;
	color:black;
	font-size:20px;

}




label {
    width: 100%;
    display: block;
    z-index: 3;
    position: relative;
	font-size:20px;

}
.nav {
    width: 68%;
    background-color: white;
    overflow-x: hidden;


}






#nav-icon {
    font-size: 45px;
    line-height: 50px;
    padding-left: 2em;
    color: black;
    background-color: #fff;


}



#nav-icon:hover {
color: #A9A9A9;

}





.nav ul, .nav li, label {
    line-height: 40px;
    margin: 0;
    padding: 0 -1em;
    list-style: none;
    text-decoration: none;
    color: #A9A9A9;
    font-weight: 100;
    width: 100%;


}
.item ul {
    padding: 0 0.25em;
	border-bottom:1px solid gray;

}
.nav li a {
    line-height: 50px;
    margin: 0;
    padding: 0 4em;
    list-style: none;
    text-decoration: none;
    color: #000000;
    font-weight: 100;

}


.nav li a:hover{

    color: #A9A9A9;

}




/* mobile menu end*/







.banner {
 display: none !important;


}





/* Full Dropdown Hide */

.dropdown {
 display: none !important;


}

.dd-button {

 display: none !important;


}

.dd-button:after {

 display: none !important;


}

.dd-button:hover {

  display: none !important;

}


.dd-input {
  display: none !important;


}




.dd-menu {
  display: none !important;

}

.dd-input + .dd-menu {
	display: none !important;

}

.dd-input:checked + .dd-menu {
  display: none !important;
}

.dd-menu li {
 display: none !important;

}

.dd-menu li:hover {
display: none !important;

}

.dd-menu li a {
  display: none !important;


}

.dd-menu li.divider{

display: none !important;

}


/* Full Dropdown Hide End */




}














@media only screen and (min-width: 712px) {



.linkwrapm{
display: none !important;

}




.bannerm{
display: none !important;

}









.linkwrap{

    background-color:#fff;
    height:50px;
	margin-top: -20px;
	width:100%;
    text-align:left;
	padding-top:10px;

}




.banner{

    background-color:#fff;
    height:60px;
	padding-top: 15px;
	padding-bottom:20px;


}





/* Full Navigation*/



a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  color: #222222;
}

/* Dropdown */





.dropdown {
  display: inline-block;
  position: relative;
  margin-left:10;


}

.dd-button {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 10px 30px 10px 20px;
  background-color: #ffffff;
  cursor: pointer;
  white-space: nowrap;

}

.dd-button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;

}

.dd-button:hover {
  background-color: #eeeeee;

}


.dd-input {
  display: none;
}

.dd-menu {
  position: absolute;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 2px 0 0 0;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
  background-color: #ffffff;
  list-style-type: none;

}

.dd-input + .dd-menu {
  display: none;

}

.dd-input:checked + .dd-menu {
  display: block;
}

.dd-menu li {
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;

}

.dd-menu li:hover {
  background-color: #f6f6f6;
}

.dd-menu li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
}

.dd-menu li.divider{
  padding: 0;
  border-bottom: 1px solid #cccccc;
}



/* Full Navigation*/




}









/* CONTENT*/




.wrapper{
  width: 100vw;
  background-color:yellow;
	z-index: -10;
  position: absolute;
  margin: 0 auto;
	height: 120px;
	color: white;
	padding: 0;
}



.content {

background-color:yellow;
width:23px;
clear:both;
}





/* CONTENT*/
<link rel="stylesheet" href="master.css">



<html>
<head>
  <link rel="stylesheet" href="style.css">
<script src"script.js">  </script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">






</head>
<body>








<div class="banner">


<img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">



</div>




<div class="bannerm">


<img border="0" alt="" src="placeholder.png" width="300" height="60" align="left" hspace="20">




</div>










<div class="linkwrapm">



	 <div class="nav">
	        <input type="checkbox" id="menu"/>
        <label for="menu" id="nav-icon">&#9776;</label>


        <div class="multi-level">
            <div class="item">
			<br>
				<div class="navm">Navigation	</div><BR>

                <input type="checkbox" id="A"/>
                <img src="images/Arrow.png" class="arrow"><label for="A">Services</label>

                <ul>
                    <li><a href="#">Branding</a></li>
                    <li><a href="#">Web/App Development</a></li>
                    <li><a href="#">Internet Marketing and SEO</a></li>
                </ul>
            </div>
            <div class="item">
                <input type="checkbox" id="B"/>
                <img src="images/Arrow.png" class="arrow"><label for="B">Jobs</label>

                <ul>
                    <li><div class="sub-item">
                        <input type="checkbox" id="B-A"/>



                    </div></li>
                    <li><div class="sub-item">
                        <input type="checkbox" id="B-B"/>


                    </div></li>
                    <li><a href="#">Graphic Designer</a></li>
                    <li><a href="#">Logo Designer</a></li>

                </ul>
            </div>
            <div class="item">
                <input type="checkbox" id="C"/>
                <img src="images/Arrow.png" class="arrow"><label for="C">About Us</label>

                <ul>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Our Work</a></li>
                </ul>
            </div>
        </div>

    </div>








  </div>







<div class="linkwrap">





<label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>

</label>







<label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>

</label>





<label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>

</label>










<label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>

</label>







<label class="dropdown">

  <div class="dd-button">
    Dropdown
  </div>

  <input type="checkbox" class="dd-input" id="test">

  <ul class="dd-menu">
    <li>Action</li>
    <li>Another action</li>
    <li>Something else here</li>
    <li class="divider"></li>
    <li>
      <a href="linkhere">Link to Rane.io</a>
    </li>
  </ul>

</label>


</div>












 <div class="wrapper">

hi


</div>
















 <div class="content">







</div>























<script type="text/javascript" src="script.js"></script>

</body>
</html>

旧答案

代码非常难以理解，类和 id 的命名使得任何东西都很难理解。此外，您还没有提供很多关于您想要更改哪些类和/或 id 的信息，这使得它变得更加困难。

我还要提到你的响应式设计方法非常不正统。

但我想我想通了。

所以可以说它是您想要的顶行后面的 包装器

.wrapper{
  width: 100vw;
  height: 120px;
  position: absolute;
  margin-top: -120px;
  color: white;
}

将位置设置为绝对并做margin-top：-元素的高度

现在它会阻止一切，而您希望它在后面。要获得该功能，您必须将带有类包装器的部门移动到顶部。 

   <body>
    <div class="wrapper">
   hi
   </div>

现在它应该在您想要的位置。但现在你看不到它。现在，如果您希望它可见，则必须将背景颜色设置为透明的，例如使用 RGBA

    background-color:rgb(255, 255, 255, .0);

应该这样做。为我工作！

旧更新

这是一个白色 div 与蓝色 div 重叠的示例

body {
  background: #333;
}

.header {
  border: 25px solid red;
  height: 30vh;
  background: rgba(0, 0, 255, .75); /*blue*/
}

.wrapper {
  border: 25px solid lime;
  height: 30vh;
  background: rgba(255, 255, 255, .75); /*white*/

  margin-top: -15vh; /* half way overlapping*/
}
<body>
  <div class="header">
  </div>
  <div class="wrapper">
  </div>
</body>

现在请注意，当我将 html 标签移动到包装器位于顶部而不是标题的位置时会发生什么！

body {
  background: #333;
}

.header {
  border: 25px solid red;
  height: 30vh;
  background: rgba(0, 0, 255, .5); /*blue*/
  
    margin-top: -15vh; /* half way overlapping*/
}

.wrapper {
  border: 25px solid lime;
  height: 30vh;
  background: rgba(255, 255, 255, .5); /*white*/
}
<body>
  <div class="wrapper">
  </div>

  <div class="header">
  </div>
  
</body>

请注意我如何将边距顶部的位置从 .wrapper 更改为 .header

【讨论】：

  • 对不起，我一直在复制和粘贴不同的代码，我知道我做“移动显示的方式可能是其他人所做的。我知道 css 和 html 的基础知识，但谈到谈论当我遇到问题时。我会尝试你的建议。谢谢！
  • 啊，好吧，我明白了！ @BlakeStrib 如果您仍然遇到同样的问题，我将为您创建一个示例，请在您测试完代码后@我让我知道它是如何进行的！
  • 您的建议实际上与我正在尝试做的相反。嗯ibb.co/X4wBNPf
  • @BlakeStrib 您希望它重叠，对吗？如果你还想把它放在后面，你必须移动 html 标签。如果这不是您想要的，您能否再次详细说明您要做什么？
  • 正如你在这张图片中看到的那样，带有黄色背景的包装器位于链接上方。阻止下拉菜单。我希望将包装器放在导航的最后面，ibb.co/VHYrW2n
猜你喜欢
  • 2021-02-01
  • 2017-05-26
  • 2016-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-02
  • 2016-11-11
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode