定位流之绝对定位

最新推荐文章于 2022-04-04 19:48:54 发布

叫我邱球球

最新推荐文章于 2022-04-04 19:48:54 发布

阅读量654

点赞数

分类专栏：有关CSS 文章标签：绝对定位 css 属性心得前端

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/60574787

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

之前学习到的相对定位中，我们已经知道相对定位是不脱离标准流的。相对定位是根据原有的位置来定位的。

而我们今天学习的绝对定位的元素是脱离标准流的。

绝对定位的元素是不区分块级元素和行内元素以及行内块级元素的。所有的元素都可以设置宽高。

------------------------------分割线---------------------------------

绝对定位：

①默认情况下，所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta chars et="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
    div{
        width: 100px;
        height: 100px;
    }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }
         .box2{
             width: 200px;
             height: 200px;
             background-color: green;
             position: absolute;
             bottom: 0;
             left:0;
         }
    </style>
</head>
<body>
<div class="box1">
            <div class="box2">
            </div>
            </div>
</body>
</html>

------------------------------分割线---------------------------------

②如果一个绝对定位的元素有“祖先元素”，并且“祖先元素”也是定位流（这里的定位流指的是绝对定位/相对定位/固定定位，静态定位不可以），那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。（要注意，是祖先元素，而不是仅限于父元素。）

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta chars et="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box1{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: red;
            top:100px;
            left:100px;
        }
        .box2{
            width: 250px;
            height: 250px;
            background-color: blue;
        }
         .box3{
             width: 200px;
             height: 200px;
             background-color: green;
             position: absolute;
             bottom: 0;
             left:0;
         }
    </style>
</head>
<body>
<div class="box1">
            <div class="box2">
                <div class="box3">
                    
                </div>
            </div>
            </div>
</body>
</html>

此时box3就是一个“祖先是定位流”的定位流。因此就会以box1为参考点。

------------------------------分割线---------------------------------

③如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素是定位流，那么这个绝对定位的元素会以离他最近的那个祖先元素作为参考点。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta chars et="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box1{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: red;
            top:100px;
            left:100px;
        }
        .box2{
            width: 250px;
            height: 250px;
            background-color: blue;
            position: absolute;
            right: 0;
            top: 0;
        }
         .box3{
             width: 200px;
             height: 200px;
             background-color: green;
             position: absolute;
             bottom: 0;
             left:0;
         }
    </style>
</head>
<body>
<div class="box1">
            <div class="box2">
                <div class="box3">
                    
                </div>
            </div>
            </div>
</body>
</html>

大家可以试一试，并且仔细观察一下代码。