Neworld

绝对定位
知识点绝对定位:position:absolute参照物:1、上级元素中有定位(position)属性的2、找的是...
扫描右侧二维码阅读全文
08
2019/05

绝对定位

知识点

绝对定位:
position:absolute
参照物:
1、上级元素中有定位(position)属性的
2、找的是最近的那个有定位属性的父级

偏移量:top left right bottom

查找参照物的顺序:先找父级元素,如果有定位属性(podition),就以这个父级元素作为参照物发生偏移
如果没有找到就向外层逐级查找,直到找到有position属性的元素,如果一直都没有,那么就以最外层元素发生偏移

图片

99937925558b7d9f43255c21c7e3d1b7.png

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
                .box1{
                    width: 600px;
                    height: 400px;
                    margin: 100px auto;
                    background-color: gray;
                    border: solid 1px red;
                    /* 相对定位 */
                    position: relative;
                }
                
                .box2{
                    width: 400px;
                    height: 200px;
                    margin: 50px auto;
                    background-color: green;
                    /* 相对定位 */
                    /* position: relative; */
                    
                }
                .box3{
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    /* 圆 */
                    border-radius: 50%;;
                    /* 绝对定位 */
                    /*  参照物:有定位属性的最近的父级元素*/
                    position: absolute;
                    /* left: 0; */
                    top:30px;
                    right: 80px;
                }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <div class="box3"></div>
            </div>
        </div>
        
        
        
        
    </body>
</html>
文章名: 《绝对定位》

本文链接:https://www.neworld.studio/755.html

除特别注明外,文章均由 Neworld 原创

 原创文章 转载时请注明 出处 以及文章链接
最后修改:2019 年 05 月 08 日 10 : 43 PM

发表评论