z-index无效&注意事项

1.z-index只能作用在position为absolute,relative,fixed的非static元素上

2.z-index只能在同等级元素上作用，无法在父元素和子元素上起作用（父元素和别的父元素的子元素这样是无效的）。

3.看2的下面例子：自己去运行一下就可以理解了。反正记住用z-index要在同一个级别的元素用。把下面的红色部分分别删和不删比较下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:100%;height:1000px;'>
        <div id='父1' style='width:200px;height:100px;position:relative;background:green;top:0px;z-index:3;'>
            <div id='子1' style='width:100px;height:100px;position:absolute;top:100px;left:30px;background:white;border:1px solid blue;'>
                子1
            </div>
        </div>
        <div id='父2' style='width:200px;height:100px;position:absolute;background:red;left:30px;top:50px;z-index:2;'>红色</div>
        <div style='width:200px;height:100px;position:absolute;background:yellow;left:60px;top:120px;z-index:1;'>黄色</div>
    </div>
</body>
</html>

 

posted @ 2017-05-26 13:01  Horsen  阅读(1209)  评论(0)  编辑  收藏  举报