我有以下代码
<!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，使其不可见？