Question

我的网页的z顺序有问题。我有这个页面：

<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="wrapper">
      <nav>
        <ul>
          <li><p>menu</p>
            <ul>
              <li><a href="#">item 1</a></li>
              <li><a href="#">item 2</a></li>
              <li><a href="#">item 3</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <table>
        <tr>
          <td><img src="test.png"></td>
          <td><img src="test.png"></td>
        </tr>
        <tr>
          <td><img src="test.png"></td>
          <td><img src="test.png"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

和这个CSS代码：

nav {
  float:left;
}
nav ul{
  max-width:70px;
  list-style:none;
  margin-left:-40px;
}
nav ul ul {
  display:none;
  max-width:none; 
  font-size:30px;
  background-color:red;
}
nav ul ul :hover {
  opacity:0.6;
}
nav ul li:hover > ul {
  display:block;
  width:400px;
}
nav ul ul li {
  float:none; 
  position:relative;
  width:350px;
}
table {
  z-index:-1;
}

可能不是最优的代码，但为什么菜单（红色部分）没有放在表格/图像的前面？

CSS和堆栈顺序：为什么不工作？

0 个答案: