定位/相对定位 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位/相对定位</title>
        <style type="text/css">
        /* 
            定位
                通过定位可以将元素摆放到页面中的任意位置
                使用position属性来设置元素的定位
                可选值
                    static默认值，开启定位
                    relative开启相对定位
                    absolute开启绝对定位
                    fixed开启固定定位
         */
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }
            /* 
                相对定位
                    当为元素设置position:relative;则开启了元素的相对定位
                        1.开启相对定位，元素不会发生任何变化
                        2.开启相对定位，元素不会脱离文档流
                        3.相对定位元素，是相对于其在文档流中的位置进行定位的
                        4.相对定位会使元素提升一个层级
                        5.相对定位不会改变元素的性质，块还是块行内还是行内
                        
                    当元素开启定位以后，可以通过四个方向的偏移量来控制元素的位置
                        top元素与其定位位置的顶部距离
                        bottom元素与其定位位置的底部距离
                        left元素与其定位位置的左侧距离
                        right元素与其定位位置的右侧距离
                    
                    一般只需要使用两个值即可确定一个元素的位置
             */
            .box2{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                position: relative;
                top: -200px;
                left: 200px;
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: #00f;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

 

posted @ 2022-05-12 10:41  氯丙嗪  阅读(25)  评论(0)    收藏  举报