20181127——Css中的绝对定位和相对定位

最新推荐文章于 2024-04-03 04:38:30 发布

宫城诗

最新推荐文章于 2024-04-03 04:38:30 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36344771/article/details/84561955

本文深入解析了CSS中的绝对定位和相对定位的区别与应用。绝对定位使元素脱离文档流，可根据最近的已定位祖先元素进行定位；相对定位则使元素在其初始位置基础上调整，不影响后续元素布局。通过具体代码示例，展示了不同定位方式对页面布局的影响。

在CSS中，所谓绝对定位指的是“相对于”已经定位的祖先元素，如果不存在已经定位的祖先元素，那么就“相对于”最初的包含快(一般情况下为body);相对定位指的是相对于元素初始位置进行定位。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
相对定位
相对定位比较简单，如果在某个元素中设置了position属性为relative,那么该元素会相对于初始位置进行定位
相对定位不会脱离文档流(文档流表示针对窗体而言，自上而下分为多行，从而依左至右排放元素)，即当第二个盒子按照left:30px;top:40px;的设置相对移动之后，原来的位置其实是保持不变，第三个盒子不会占用第二个盒子的原始位置。
在这里插入图片描述

绝对定位
绝对定位相对于上述情况，则相较于复杂一点。绝对定位需要找到设置绝对定位的元素的祖先元素，它会根据离其最近的祖先元素进行定位。
根据上图可以明显的看出，当第二个盒子设置为绝对定位之后，该盒子脱离文档流，并且它的原始位置已经被第三个盒子所替代。接着第二个盒子开始查找它的“参照物”，由于白色盒子的postion属性为默认值，于是向上层级查找，橘色盒子position:absolute,在绝对定位中，符合祖先元素的条件(定位设置为非static),因此第二个盒子会以橘色盒子为参照物进行向左和向下移动。
在这里插入图片描述

有了绝对定位和相对定位，top和left才能起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding:0px
        }
        #div1{
            width:2000px;
            height: 400px;
            background-color: orange;
        }
        #div2{
            margin:10px;
            width: 200px;
            height: 200px;
            float:left;
            background-color: blue;
        }
        #div3{
            position: absolute;
            left:60px;
            top:40px;
            margin:10px;
            width: 200px;
            height: 200px;
            float:left;
            background-color: red;
        }
        #div4{
             margin:10px;
             width: 200px;
             height: 200px;
             float:left;
             background-color: yellow;
         }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
</body>
</html>

自己编写的代码如下