css定位法 

<style type="text/css">
.box{
    width:199px;
    height:199px;
}
.box:first-of-type{
    background-color:red;
    position:absolute;/* 绝对定位 */
    top:0;
    left:0;
    z-index:21122312;
}
.box:last-of-type{
    background-color:green;
    position:absolute;/* 定位 */
    top:101px;
    left:101px;
    z-index:2112231;/* 谁大谁在前面 */
}
/* 以浏览器为位置 */
.a{
    width:299px;
    height:100px;
    background-color:pink;
    position:fixed;/* 固定定位 */
    left:500px;
    top:329px;
}
.b{
    width:299px;
    height:100px;
    background-color:black;
    position:relative;/*  相对定位 */
    left:0px;
    top:29px
}
.c{
    width:200px;
    height:200px;
    position:fixed;/* 固定定位 */
    border:1px solid red;
    left:50px;
    top:329px;
}

</style>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="a"></div>
    <div class="c">
        <div class="b"></div>
    </div>
    <div class="box"></div>
</body>
</html>

 

posted @ 2016-08-16 18:26  刘文武  阅读(115)  评论(0)    收藏  举报