CSS定位 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        .con{
            width: 500px;
            border: 1px solid #000;
        }
        .con div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .box1{
            background-color: gold;
            left:20px;
            top:20px;
            z-index:11;
        }
        .box2{
            background-color: cyan;
            left:40px;
            top:40px;
            z-index:22;
        }
        .box3{
            background-color: lime;
            left:60px;
            top:60px;
            z-index:1;
        }
        .box4{
            background-color: plum;
            left:80px;
            top:80px;
            z-index:3;
        }
        .box5{
            background-color: yellow;
            left:100px;
            top:100px;
            background: url(images/telephone.jpg) 10px 10px no-repeat;
            /*    图片局部定位,可以通过浏览器的检查元素,更改上面的两个值,用上下键或者pgUPpgDOWN控制找到最合适的位置    */
        }
        
        /*    
        在定位中
        相对定位relative(adj.相对的;n.亲戚) 是相对元素自己原本的位置来定位的;
        !在使用相对定位的时候,元素原本的位置===>依旧存在.
        绝对定位absolute(adj.绝对的) 是相对与父集来定位.如果父集没有定位属性的话,就继续追溯,直到body.
        !在使用绝对定位的时候,元素原本的位置===>不再存在.
        固定定位fixed(v.固定的,确定的,维修;n.困境)    是相对整个浏览器屏幕来进行定位的.所以不管父集或者设置没有设置定位属性,都以整个屏幕作为定位属性.
        !和绝对属性相同,在使用固定定位的时候,元素原本的位置===>不再存在.
        */


        /*    
        z-index中
        数字代表级别
        默认级别无.
        设置级别后,级别越大,元素越靠上.
        同级别元素,后来者居上.
        */
    </style>
</head>
<body>
    <!-- div.con>div.box${$}*5 -->
    <div class="con">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
    </div>
</body>
</html>

 

posted @ 2019-08-13 16:25  Jrri  阅读(156)  评论(0)    收藏  举报