前端的学习之路：初级CSS---绝对定位

最新推荐文章于 2022-10-27 19:04:07 发布

new-SkyWaller

最新推荐文章于 2022-10-27 19:04:07 发布

阅读量113

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113705004

版权

CSS 绝对定位包含块层级定位

关键词由CSDN通过智能技术生成

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.22.02.css"> -->
    <style>
        body{
        font-size:60px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: blue;

        /* 
        绝对定位
            -当元素的position属性值设置为absolute时，则会开启了元素的绝对定位
            -绝对定位的特点：
                1、开启了绝对定位后，如果不设置偏移量，元素的位置不会发生变化
                2、开启了绝对定位后，元素会从文档流中脱离（box3上移到box2的位置）
                3、绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
                4、绝对定位会使元素提升一个层级（box2把box3盖住了）
                5、绝对定位元素是相对于其包含块(包含块：参照物或者定位位置)进行定位的
                
                包含块（containing block）
                    -正常情况下：
                                包含块就是离当前元素最近的祖先块元素
                                <div><div></div></div>

                                em的祖先块元素是div,因为span是行内元素
                                <div><span><em>hello</em></span></div>

                    -绝对定位的包含块：
                            包含块就是离它最近的开启了定位的祖先元素 
                                如果所有的祖先元素都没有开启定位则根元素就是它的包含块
                            -html(根元素，初始包含块)               


        */
        position: absolute;
        /* left: 0;
        top: 0; 设置这两个属性，并且属性值为0可以找寻定位位置*/
        left: 400px;
        top: -200px;/*这里是根据box4的包含块（相对定位）进行绝对定位*/


       
    }
    .box4{
        width: 400px;
        height: 400px;
        background-color: tomato;
        position: relative;
    }
    .box5{
        width: 300px;
        height: 300px;
        background-color: chartreuse;
         position: relative;
    } 
    .box3{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    
    </style>
    
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5 
            <div class="box2">2</div>
        </div>
    </div>
    
    <div class="box3">3</div>
</body>
</html>