文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我的内容是媒体查询中的浮动beind容器。

问我的内容是媒体查询中的浮动beind容器。
EN

Stack Overflow用户
提问于 2017-03-10 19:01:09
回答 1查看 41关注 0票数 0

我试图创建一个汉堡包菜单，当我这样做的时候，当我给一个.nav-list时，我的float: none;就会在容器后面。

我试着给它margin: 0;和所有东西，但似乎都没有用。我试图让它打开和降低容器的高度，当关闭时，增加容器的高度和降低菜单栏的高度。

下面是我的代码，其余的代码在下面的代码中：https://codepen.io/anon/pen/jBBdWv

HTML:

代码语言：javascript
复制
<div id="jobs-popup">

    <img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">

    <div class="jobs-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!--End Section for Jobs Popup -->

<!-- Section for contact popup -->
<div id="contact-popup">

    <img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">

    <div id="contact-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End Section for Contact Popup -->

<!-- Section for Press popup -->
<div id="press-popup">

    <img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">

    <div id="press-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End section Press -->

<!-- Section for legal popup -->
<div id="legal-popup">

    <img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">

    <div id="legal-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>
<!-- End section Legal -->

<!-- Section for Support -->
<div id="support-popup">

    <img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">

    <div id="support-content">
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        <h1 class="whip">Test</h1>
        ...
    </div>

</div>

<center>

    <div id="top-bar">

        <a class="burger-nav"></a>

        <div id="nav-bar">

            <ul>
                <a href="#" id="jobs" class="test">
                    <li class="nav-list" id="job-under">Jobs</li>
                </a>

                <a href="#" id="contact" class="test">
                    <li class="nav-list" id="contact-under">Contact</li>
                </a>

                <a href="#" id="press" class="test">
                    <li class="nav-list" id="press-under">Press</li>
                </a>

                <a href="#" id="legal" class="test">
                    <li class="nav-list" id="legal-under">Legal</li>
                </a>

                <a href="#" id="support" class="test">
                    <li class="nav-list" id="support-under">Support</li>
                </a>
            </ul>

        </div>

    </div>

    <div id="container">

        <ul id="menu"></ul>

        <h1 id="name">Touch</h1>

        <ul class="bubbles">

            <li id="firstCircle"></li>
            <li id="secondCircle"></li>
            <li id="thirdCircle"></li>
            <li id="fourthCircle"></li>
            <li id="fifthCircle"></li>
            <li id="sixthCircle"></li>

        </ul>

    </div>

</center>
html
css
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-10 20:17:18

在代码开始时，所有这些弹出元素上都有position和z-index值，它们在媒体查询布局中覆盖在#top-bar之上。要将#top-bar放在上面，给它一个非静态的position和一个比弹出窗口更高的z-index。我用了#top-bar { position: relative; z-index: 101; }

为了摆脱ul上的默认#top-bar，请应用padding: 0;。

顺便说一句，href属性在li的#top-bar中，您可以修复它。

​

代码语言：javascript
复制
 #top-bar {
   max-width: 100%;
   max-height: 7%;
   margin: 0 auto;
   background-color: #FFFFFF;
   position: relative;
   z-index: 101;
 }

#top-bar ul {
  padding: 0;
}
 
 #container {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
   position: relative;
   overflow: hidden;
 }
 
 body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   color: #262626;
   overflow: hidden;
 }
 
 ul {
   list-style: none;
   top: 9%;
 }
 
 .nav-list {
   float: left;
   font-size: 1.2em;
   padding-right: 1%;
   font-weight: bold;
   margin: 2%;
 }
 /*Reg bubbles section -------------------------------------------- */
 
 .bubbles {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   transform: translateZ(0);
 }
 
 .bubbles li {
   position: absolute;
   list-style: none;
   display: block;
   border-radius: 100%;
   -ms-animation: fadeAndScale 33s ease-in infinite;
   -webkit-animation: fadeAndScale 33s ease-in infinite;
   -moz-animation: fadeAndScale 33s ease-in infinite;
   -o-animation: fadeAndScale 33s ease-in infinite;
   transition-timing-function: linear;
 }
 /* The first Circle animation------------------------------------------------------------------------------------------------ */
 
 .bubbles li:nth-child(1) {
   width: 9%;
   height: 20%;
   top: 20%;
   left: 20%;
   background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
   animation-name: firstCircle;
 }
 /* Mozilla First Circle Animation */
 
 @-moz-keyframes firstCircle {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 /* Webkit First Circle Animation */
 
 @-webkit-keyframes firstCircle {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 
 @-ms-keyframes firstCircle {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* End first circle animation -------------------------------------------------------------------------------------- */
 /* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
 
 .bubbles li:nth-child(2) {
   width: 9%;
   height: 20%;
   position: absolute;
   left: 40%;
   top: 40%;
   animation-name: secondAnimation;
 }
 /* Webkit Second Animation */
 
 @-webkit-keyframes secondAnimation {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 /* Mozilla Second Animation */
 
 @-moz-keyframes secondAnimation {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 /* Ms Second Animation */
 
 @-ms-keyframes secondAnimation {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* End of Second Circle ------------------------------------------------------------------------------------- */
 /*Begin of Third Circle ----------------------------------------------------------------------------------- */
 
 .bubbles li:nth-child(3) {
   width: 9%;
   height: 20%;
   position: absolute;
   left: 60%;
   top: 10%;
   animation-name: thirdAnimation;
 }
 /* Webkit Third Animation */
 
 @-webkit-keyframes thirdAnimation {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 /* Mozilla Third Animation */
 
 @-moz-keyframes thirdAnimation {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 /* MS Third Animation */
 
 @-ms-keyframes thirdAnimation {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* End of the Third Circle --------------------------------------------------------------------------------------------------------- */
 /* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
 
 .bubbles li:nth-child(4) {
   width: 9%;
   height: 20%;
   position: absolute;
   left: 10%;
   top: 60%;
   animation-name: fourthAnimation;
 }
 /* Webkit Fourth Animation */
 
 @-webkit-keyframes fourthAnimation {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 /* Mozilla Fourth Animation */
 
 @-moz-keyframes fourthAnimation {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 /* MS Fourth Animation */
 
 @-ms-keyframes fourthAnimation {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* END of Fourth Animation ------------------------------------------------------------------------------------------------ */
 /* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
 
 .bubbles li:nth-child(5) {
   width: 9%;
   height: 20%;
   position: absolute;
   left: 50%;
   top: 10%;
   animation-name: fifthAnimation;
 }
 /* Webki Fifth Animation */
 
 @-webkit-keyframes fifthAnimation {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 
 @-moz-keyframes fifthAnimation {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 
 @-ms-keyframes fifthAnimation {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */
 /* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
 
 .bubbles li:nth-child(6) {
   width: 9%;
   height: 20%;
   position: absolute;
   left: 80%;
   top: 60%;
   animation-name: sixthAnimation;
 }
 /* Webkit sixth animation */
 
 @-webkit-keyframes sixthAnimation {
   0% {
     z-index: 100;
     -webkit-transform: scale(0);
   }
   100% {
     z-index: 0;
     -webkit-transform: scale(200);
   }
 }
 /* Mozilla Sixth Animation */
 
 @-moz-keyframes sixthAnimation {
   0% {
     z-index: 100;
     -moz-transform: scale(0);
   }
   100% {
     z-index: 0;
     -moz-transform: scale(200);
   }
 }
 /* MS Sixth Animation */
 
 @-ms-keyframes sixthAnimation {
   0% {
     z-index: 100;
     -ms-transform: scale(0);
   }
   100% {
     z-index: 0;
     -ms-transform: scale(200);
   }
 }
 /* End of Sixth Animation ---------------------------------------------------------------------------------------------- */
 
 #name {
   color: white;
   font-size: 6em;
   position: relative;
   top: 30%;
   text-shadow: 2px 2px grey;
   z-index: 10;
 }
 
 #jobs li {
   color: #262626;
 }
 
 #contact li {
   color: #262626;
 }
 
 #press li {
   color: #262626;
 }
 
 #legal li {
   color: #262626;
 }
 
 #support li {
   color: #262626;
 }
 
 #jobs-popup {
   width: 100%;
   height: 90%;
   margin-top: 5%;
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   overflow-y: hidden;
 }
 
 .jobs-content {
   width: 600px;
   height: 560px;
   margin: 20 auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: white;
   word-wrap: break-word;
   overflow: auto;
   z-index: 100;
   display: none;
 }
 
 #x-icon1 {
   width: 80px;
   height: 80px;
   position: absolute;
   left: 10%;
   top: 4%;
   cursor: pointer;
   display: none;
 }
 
 .whip {
   margin: 0 auto;
   color: black;
   display: none;
 }
 
 #contact-popup {
   width: 100%;
   height: 90%;
   margin-top: 5%;
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   overflow-y: hidden;
 }
 
 #contact-content {
   width: 600px;
   height: 560px;
   margin: 20 auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: white;
   word-wrap: break-word;
   overflow: auto;
   z-index: 100;
   display: none;
 }
 
 #x-icon2 {
   width: 80px;
   height: 80px;
   position: absolute;
   left: 10%;
   top: 4%;
   cursor: pointer;
   display: none;
 }
 
 #press-popup {
   width: 100%;
   height: 90%;
   margin-top: 5%;
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   overflow-y: hidden;
 }
 
 #press-content {
   width: 600px;
   height: 560px;
   margin: 20 auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: white;
   word-wrap: break-word;
   overflow: auto;
   z-index: 100;
   display: none;
 }
 
 #x-icon3 {
   width: 80px;
   height: 80px;
   position: absolute;
   left: 10%;
   top: 4%;
   cursor: pointer;
   display: none;
 }
 
 #legal-popup {
   width: 100%;
   height: 90%;
   margin-top: 5%;
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   overflow-y: hidden;
 }
 
 #legal-content {
   width: 600px;
   height: 560px;
   margin: 20 auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: white;
   word-wrap: break-word;
   overflow: auto;
   z-index: 100;
   display: none;
 }
 
 #x-icon4 {
   width: 80px;
   height: 80px;
   position: absolute;
   left: 10%;
   top: 4%;
   cursor: pointer;
   display: none;
 }
 
 #support-popup {
   width: 100%;
   height: 90%;
   margin-top: 5%;
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   overflow-y: hidden;
 }
 
 #support-content {
   width: 600px;
   height: 560px;
   margin: 20 auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: white;
   word-wrap: break-word;
   overflow: auto;
   z-index: 100;
   display: none;
 }
 
 #x-icon5 {
   width: 80px;
   height: 80px;
   position: absolute;
   left: 10%;
   top: 4%;
   cursor: pointer;
   display: none;
 }
 
 @media screen and (max-width: 1024px) {
   .bubbles {
     visibility: hidden;
   }
 }
 
 @media screen and (max-width: 415px) {
   #name {
     margin-top: 20%;
     font-size: 4em;
   }
   .burger-nav {
     display: block;
     height: 40px;
     width: 100%;
     background: url(Pictures/burgerlogo.png) no-repeat 98% center;
     background-size: 30px 30px;
     background-color: #404040;
     cursor: pointer;
   }
   #top-bar ul {
     height: 40%;
     overflow: hidden;
     background-color: #505050;
     //height: 0;
   }
   #top-bar ul.open {
     height: auto;
   }
   ul {
     margin-top: 0;
   }
   .nav-list {
     float: none;
   }
 }
代码语言：javascript
复制
<div id="jobs-popup">
  <img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">
  <div class="jobs-content">
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>

  </div>

</div>
<!--End Section for Jobs Popup -->

<!-- Section for contact popup -->
<div id="contact-popup">
  <img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">
  <div id="contact-content">
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>

  </div>


</div>
<!-- End Section for Contact Popup -->

<!-- Section for Press popup -->
<div id="press-popup">
  <img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">
  <div id="press-content">
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>

  </div>
</div>
<!-- End section Press -->

<!-- Section for legal popup -->
<div id="legal-popup">
  <img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">
  <div id="legal-content">
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>

  </div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
  <img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">
  <div id="support-content">
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>
    <h1 class="whip">Test</h1>

  </div>
</div>
<div id="top-bar">
  <a class="burger-nav"></a>
  <div id="nav-bar">
    <ul>
      <li href="#" id="jobs" class="test"><a class="nav-list" id="job-under">Jobs</a></li>
      <li href="#" id="contact" class="test"><a class="nav-list" id="contact-under">Contact</a></li>
      <li href="#" id="press" class="test"><a class="nav-list" id="press-under">Press</a></li>
      <li href="#" id="legal" class="test"><a class="nav-list" id="legal-under">Legal</a></li>
      <li href="#" id="support" class="test"><a class="nav-list" id="support-under">Support</a></li>


    </ul>
  </div>

</div>
<div id="container">

  <ul id="menu">


  </ul>

  <h1 id="name">Touch</h1>
  <ul class="bubbles">

    <li id="firstCircle"></li>
    <li id="secondCircle"></li>
    <li id="thirdCircle"></li>
    <li id="fourthCircle"></li>
    <li id="fifthCircle"></li>
    <li id="sixthCircle"></li>


  </ul>


</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42725877

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档