绝对定位/相对定位

<!--相对定位：相对与元素自己本身来移动定位
    绝对定位:距离父类(有position样式的父类)...要是没有找到父类，就有默认的body来代替-->
<style>
    #zong{
         width: 200px;
         height: 200px;
         background-color: #00FBFF;
    }
    #d1{
         width: 50px;
         height: 50px;
         background-color:#68FB00;

/*相对定位*/
         position: relative;
         left: 20px;
         bottom:20px;
    }
    #d2{
         width:50px;
         height: 50px;
         background-color:pink;
    }
    #zong1{
         width: 200px;
         height: 200px;
         background-color:red;
         position: relative;
    }
    #dd1{
         width: 50px;
         height: 50px;
         background-color:#E0FF00;
         left: 20px;
         top:50px;
/*绝对定位*/
         position: absolute;
/*z-index:值后面不要加像素 想让哪个在前面就把哪个的值设大*/
         z-index:100;
        
    }
    #dd2{
         width:50px;
         height: 50px;
         background-color:#8900FF;
         z-index: 500;
         position: absolute;
         left: 30px;
         top: 60px;
    }
    
    
    
</style>
</head>

<body>
    <div id="zong">
        <div id="d1"></div>
        起于凡而非凡
        <div id="d2"></div>
    </div>
    <div id="zong1">
        <div id="dd1"></div>
        <div id="dd2"></div>
    </div>
</body>

posted on 2019-05-06 12:27  默示う梦璃  阅读(115)  评论(0)    收藏  举报