position:absolute与relative的区别 | 字节青训营笔记

拿奖去喝AD钙
175 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第15天！

😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀😁😀

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻 标准文档流

标准文档流指在不使用其他与排列和定位相关的特殊CSS规则时，元素的默认排列规则。

HTML文档中的元素可以分为两大类：行内元素和块级元素。

1.行内元素，是DOM树中的一个节点。不占据单独的空间，依附于块级元素，行内元素没有自己的区域。

2.块级元素，是DOM树中的一个节点。总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则：

margin控制的是盒子与盒子之间的距离，padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题，因此要精确控制盒子的位置，就必须对margin有更深入的了解。

（1）行内元素之间的水平margin当两个行内元素紧邻时，它们之间的距离为第一个元素的右margin加上第二
元素的左margin。

（2）块级元素之间的竖直margin两个竖直排列的块级元素，它们之间的垂直距离不是上边的第一个元素的下
margin和第二个元素的上margin的总和，而是两者中的较大者。这在实际制作网页的时候要特别注意。
（3）嵌套盒子之间的margin这时子块的margin以父块的content为参考进行排列。

（4）margin设为负值会使设为负数的块向相反的方向移动，甚至会覆盖在另外的块上。

🍻 relative（相对定位）

对象遵循标准文档流，依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系。

对象不可层叠，不脱离文档流，依然占据文档的一部分。 以原自身文档位置左上角为原点进行定位。 通过top、bottom、left、right调整位置

如图所示：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

CSS

div{
    width: 150px;
    height: 150px;
}
.one{
    border: 2px solid red;
}
.two{
    border: 2px solid rgb(0, 255, 0);
}
.three{
    border: 2px solid rgb(34, 0, 255);
}

image.png

CSS

div{
    width: 150px;
    height: 150px;
}
.one{
    position: relative;
    border: 2px solid red;
    top: 15px;
    left: 15px;
}
.two{
    position: relative;
    border: 2px solid rgb(0, 255, 0);
    top: 25px;
    left: 25px;
}
.three{
    position: relative;
    border: 2px solid rgb(34, 0, 255);
    top: 35px;
    left: 35px;
}

image.png

由图可见，relative是相对该对象处于标准文档流中的位置依据left,top进行定位（当然还可以使用right，bottom，本例仅作实验说明），left,top 并不改变该对象原本在文档流中的占位空间

CSS

div{
    width: 150px;
    height: 150px;
}
.one{
    position: relative;
    border: 2px solid red;
    top: 15px;
    left: 15px;
    margin: 100px;
}
.two{
    position: relative;
    border: 2px solid rgb(0, 255, 0);
    top: 25px;
    left: 25px;
    padding: 25px;
}
.three{
    position: relative;
    border: 2px solid rgb(34, 0, 255);
    top: 35px;
    left: 35px;
    margin: 25px;
    padding: 25px;
}

image.png

由图可见，当设置了margin属性时，该对象在标准文档流中的占维空间也随之改变。 同理，padding也会改变相对定位的对象在标准文档流中的占维空间，如上图所示。

[@5V)GZ]0U6U)M9_NOZVUD6D.gif

🍻 absolute（绝对定位）

对象可层叠，脱离文档流，不占据文档位置。 以最近的具有定位的父元素左上角为原点进行定位， 若所有的父元素均无定位则原点为body元素的坐标原点 通过top、bottom、left、right调整位置。

注意： 在使用absolute定位时，必须指定left,top,right,bottom中的至少一个（否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从标准文档流，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间）。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <div class="one">one
        <div class="two">two
            <div class="three">three</div>
            <div class="four">four</div>
        </div>
    </div>
   
    
</body>
</html>

CSS

.one{
    width: 400px;
    height: 400px;
    text-align:right;
    position: relative;
    border: 2px solid rgba(13, 13, 13, 0.733);

}
.two{
    width: 250px;
    height: 250px;
    text-align: right;
    position: absolute;
    border: 2px solid rgb(193, 26, 143);
}
.three{
    width: 150px;
    height: 150px;
    text-align: right;
    position: absolute;
    border: 2px solid rgb(203, 236, 21);
}
.four{
    width: 100px;
    height: 100px;
    text-align: right;
    position:absolute;
    border: 2px solid red;
}

image.png

CSS

.one{
    width: 400px;
    height: 400px;
    text-align:right;
    position: absolute;
    border: 2px solid rgba(13, 13, 13, 0.733);

}
.two{
    width: 250px;
    height: 250px;
    text-align: right;
    position: absolute;
    border: 2px solid rgb(193, 26, 143);
    top: 0;
    left: 50px;
}
.three{
    width: 150px;
    height: 150px;
    text-align: right;
    position: absolute;
    border: 2px solid rgb(203, 236, 21);
    top: 50px;
    right: 0;
}
.four{
    width: 100px;
    height: 100px;
    text-align: right;
    position:absolute;
    border: 2px solid red;
    bottom: 50px;
    left: 0;
}

image.png

注意： 如果同时设置了left/right 属性，那么left生效。同理top/bottom同时存在时，top生效。

🍻 总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

avatar
文章
阅读
粉丝