css - 具有正z-index的元素的负z-index

我有以下代码

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  #nav {
    color:white;
    position:fixed;
    z-index: 1;
    height:30px;
    top:0;
    left:0;
    right:0;
    background:blue;

  }
  #controls {
    position:fixed;
    z-index:-10;
    top:30px;
    left:0;
    right:0;
    bottom:0;
    background:red;
  }
</style>
</head>
<body>
<div id="content">
  <div id="nav">
    <span>Icon</span>
    <div id="controls">Hidden Controls</div>
  </div>
  <p>Hello World</p>
</div>
</body>
</html>

#controls是可见的，因为父元素的z-index大于#content。有没有办法设置#controls使z-index小于#content，使其不可见？

具有正z-index的元素的负z-index

0 个答案: