Question

在正常屏幕上，菜单位于内容之前，但在导航切换并显示菜单后缩小浏览器宽度后，在点击菜单时，显示的导航显示在内容后面

同样在加载时我希望所选菜单具有与悬停相同的颜色，在这种情况下#bbeecc ...我该如何获得

    .page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.header {
    background-color: #00FF00;
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

#toggle, .toggle { display: none; }


/* micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.toggle{ 
    z-index: 2; 
}


/* reset padding and margin where necessary etc. */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    z-index: 2; 
}

a {
    text-decoration: none;
    font-size:x-larger;

}

/* just some quick demo styles for color whatnot */
nav {
    background: #efefef;
    color: white;
    z-index: 2;
}

nav ul ul {
    background: #efefef;
    z-index: 2; 
    width:150px;
}

nav ul ul ul {
    background: #efefef;
    z-index: 2; 
}

nav a  {
    color: white;
    white-space:nowrap;

}

nav a:hover  {
    background: ##bbeecc;

}

/* important functional styles */
nav > ul:after {
    /* clear the float */
    content:'';
    clear:both;
    display: block;
}

nav li  {
    /* for the topmost level we want them to float.  will be overridden */
    float:left;
    font-size: large;

}

nav li a {
    /* always apply padding and display block to the a.  better user experience. */
    display:block;
    padding: 10px;
    font-size: large;

}

nav li ul li {
    /* overridden floating here */
    float: none;
    font-size: large;

}

/* here is where all the positioning takes place */
nav li {
    position:relative;
}

nav li ul {
    position:absolute;
    left: 0; /* for top most level lets align to the left */
    top: 100%; /* and have it at the bottom of the parent */
    display:none; /* hide initialy */
}

nav li ul li ul {
    left: 100%; /* for grandchild level lets align to the right of the list item */
    top: 0; /* and have it at the top of the parent li */
}

nav ul li a:hover + ul,
nav ul li a + ul:hover {
    /* show only if the element or the immediately preceding anchor is hovered*/
    display:block;
}

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


    ul{
    display: none;
    opacity: 0;
    width: auto;
    height: auto;
    background: #efefef;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    z-index: 3; 
    }

    nav {
    height:40px;
    z-index: 3; 
    }

    nav ul ul {
    background: #efefef;
    z-index: 3; 
}

nav ul ul ul {
    background: #efefef;
    z-index: 3; 
}
    nav a  {
    color: white;

}
    nav ul{

    width:200px;
    z-index: 3; 
    }   

    ul li { 
    float:none;
    display: block; 
    width: auto; 
    margin: 0 0 0 0px;
    height: auto; 
    font-size:12px;

    }

    ul li a { 
    float:none;
    display: block; 
    width: auto; 
    text-decoration: none;
    margin: 0 0 0 0;    
    color:#fff; 
    height: auto;  
    }   

/* here is where all the positioning takes place */
    nav li {
        position:relative;
        }

    nav li ul {
        position:absolute;
        left: 100%; /* for top most level lets align to the left */
        top: 0%; /* and have it at the bottom of the parent */
        display:block; /* hide initialy */
    }

    nav li ul li {
    position:relative;
    }

    nav li ul li ul {
        left: 100%; /* for grandchild level lets align to the right of the list item */
        top: -25%; /* and have it at the top of the parent li */
    }

    .toggle { display: block; position: relative; user-select: none;z-index: 3;  }

    #toggle:checked ~ ul { display: block; opacity: 1;z-index: 3; }

    ul li a:hover, ul li a:focus{
    background: ##bbeecc;
    }
    nav ul li a:hover + ul,
    nav ul li a + ul:hover {
        /* show only if the element or the immediately preceding anchor is hovered*/
        display:block;  
        opacity:1; 
        z-index: 3;     
    }
    .toggle:after {
    content: 'MENU';
    display: block;
    width: auto;
    margin: 0px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: x-large;

    color: #FFFFFF;
    background: #efefef;
    z-index: 3; 
    }

    .toggle:hover:after{
    background: #efefef;
    }

    #toggle:checked + .toggle:after{
        content: 'CLOSE MENU';
        z-index: 3; 

    }

}

我的html是

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="styletest.css" rel="stylesheet" type="text/css">

</head>

<body>
<div class="page-wrap"> 
    <header class="header">        

     <nav class="nav">
       <input type="checkbox" id="toggle" />
      <label for="toggle" class="toggle" data-open="MENU" data-close="Close Menu" onclick></label>
          <ul class="menu">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>                 
    </nav>

     </header>

     <article ">

         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>

     </article>


  <footer class="footer">
  Copyright
  </footer>

</div>

Answer 1

您正尝试将z-index应用于未定位的元素。

z-index仅在您使用元素的默认值static以外的值时才有效

nav ul{
    width:200px;
    z-index: 3;

    position: relative; /* add this */ 
}

Working demo

Answer 2

您应该将position: relative添加到ul

.menu{
    position: relative;
}

jsfiddle

Answer 3

要使用z-index，您还必须指定位置属性。

我添加了一个位置：相对于你的。

ul { list-style-type：none; 保证金：0; 填充：0px; 位置：相对; z-index：2; }

切换菜单后面的图像

3 个答案: