码迷,mamicode.com
首页 > Web开发 > 详细

css定位法

时间:2016-08-16 18:44:46      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

<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>

 

css定位法

标签:

原文地址:http://www.cnblogs.com/qq547372511/p/5777420.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!