CSS3-z-index 在chrome显示不正常，求解决！！！
如题，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
#a1
{
right: 0;
top:0%;
width: 300px;
height: 100%;
position: fixed;
background: red;
}
#a2
{
left:-100px;
top:200px;
width: 500px;
height: 300px;
position:absolute;
z-index: -1;
background: blue;
}
</style>
</head>
<body>
<div id="a1">
<div id="a2"></div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
#a1
{
right: 0;
top:0%;
width: 300px;
height: 100%;
**position: absolute;** 这样就可以了
background: red;
}
#a2
{
left:-100px;
top:200px;
width: 500px;
height: 300px;
position:absolute;
z-index: -1;
background: blue;
}
</style>
</head>
<body>
<div id="a1">
<div id="a2"></div>
</div>
</body>
</html>
目的：需要a1 能显示在 a2 之上
那么，只需改变一下HTML结构如下：
<div style="position:relative">
<div id="a1"></div>
<div id="a2"></div>
</div>