CSS定位

定位

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>
View Code

style1.css(默认static)

static(不声明position则默认static,left,top等偏移无效)

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    position:static;
    left:20px;
    top:20px;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:static;
    left:10px;
    top:10px;
}
View Code

relative

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    position:relative;
    left:20px;
    top:150px;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:relative;
    left:30px;
    top:30px;
}
View Code

absolute（会影响其它元素位置变动）

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    #position:relative;
    #left:20px;
    #top:150px;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:absolute;
    left:30px;
    top:30px;
}
View Code

fixed(不随页面上下拉动而动)

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    #position:relative;
    #left:20px;
    #top:150px;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:fixed;
    left:30px;
    top:30px;
}
View Code

 z-index(重叠后，哪个显示在前)

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    position:relative;
    left:20px;
    top:20px;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:relative;
    left:10px;
    top:10px;
}
View Code

默认是后面的元素在前

#position1{
    width:100px;
    height:100px;
    background-color:blue;
    position:relative;
    left:20px;
    top:20px;
    z-index:2;
}

#position2{
    width:100px;
    height:100px;
    background-color:green;
    position:relative;
    left:10px;
    top:10px;
    z-index:1;
}
View Code

z-index值大的在前

 

posted @ 2016-01-30 23:17  沐风先生  阅读(108)  评论(0)  编辑  收藏  举报