css定位

css定位及z-index的使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>
    <style>
        /*z-index数越大越靠顶层，数越小越靠底层*/
        #div1{
            width:200px;
            height:200px;
            background: rebeccapurple;
            position:absolute;
            top:20px;
            z-index: 2;
        }
        #div2{
            width:200px;
            height:200px;
            background:black;
            position:relative;
            left:20px;
            z-index: 1;
        }
        #div3{
            width:200px;
            height:200px;
            background:darkred;
            position:relative;
            left:30px;
            top: -80px;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <script>
        <!--显示从1到99上下排列-->
        for( var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

z-index可取负值，负值越大表示越靠底层:

<html>
<head>
    <style type="text/css">
        body{
            color:red;
        }
        img
        {
            position:absolute;
            top:0;
            left:0;
            z-index: -1;
        }
    </style>
</head>

<body>
<h1>This is a heading</h1>
<img src="../../image/1.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

 

posted @ 2017-03-02 09:23  Aqiaoba  阅读(296)  评论(0)  编辑  收藏  举报