CSS之绝对定位

最新推荐文章于 2023-06-04 22:50:38 发布

极客研究者

最新推荐文章于 2023-06-04 22:50:38 发布

阅读量190

点赞数 1

分类专栏： CSS样式表文章标签： css

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573403

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

绝对定位：
当元素的position属性设置为absolute后,则元素将开启绝对定位
绝对定位的特点:
1.开启绝对定位的元素,如果不设置元素的偏移量元素将不会发生变化
2.开启绝对定位后,元素将从文档流中脱离出来
3.绝对定位会改变元素的性质,行内变成块,块的高度被内容撑开
4.绝对定位会使元素提升一次层次
5.绝对定位是相对于包含块进行定位的

包含块：默认情况下,是离当前元素最近的祖先块元素
绝对定位的包含块:离它最近的开启定位的祖先块元素
如果所有的祖先元素都没有开启定位,则根元素就是它的包含块
html(根元素、初始包含块)

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style>
     .box1{
        width:200px;
        height:200px;
        background-color:seagreen;
        
    }

    .box2{
        width:200px;
        height:200px;
        background-color:darkorange;

        position:absolute;
        /* 
        使用
        left:0px;
        top:0px;
        来检测相对定位或者绝对定位的参照点
         */

        /*设置偏移量 */
        left:50px;
        top:50px;        
    }

    .box3{
        width:200px;
        height:200px;
        background-color:deeppink;
        
    }
    .box4{
        width:300px;
        height:300px;
        background-color:green;
        /* 开启绝对定位 */
        /* position:absolute; */
    }

    .box5{
        width:400px;
        height:400px;
        background-color:lightsalmon;
        /* 开启绝对定位 */
        position: absolute;
    }
    </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>

极客研究者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之绝对定位

绝对定位：当元素的position属性设置为absolute后,则元素将开启绝对定位绝对定位的特点:1.开启绝对定位的元素,如果不设置元素的偏移量元素将不会发生变化2.开启绝对定位后,元素将从文档流中脱离出来3.绝对定位会改变元素的性质,行内变成块,块的高度被内容撑开4.绝对定位会使元素提升一次层次5.绝对定位是相对于包含块进行定位的包含块：默认情况下,是离当前元素最近的祖先块元素...
复制链接

扫一扫

专栏目录