Css 相对位置与绝对位置？

CSS中的

位置：相对

和

位置：绝对

之间有什么区别？什么时候应该使用它们？

相对位置：

如果指定position:relative，则可以使用top或bottom以及left或right相对于元素在文档中通常出现的位置移动元素

绝对位置：

当您指定position:absolute时，元素将从文档中删除，并精确地放置在您告诉它的位置

---

这是一个很好的教程，介绍了两种位置的示例用法，分别是绝对定位和相对定位。

绝对CSS定位

位置：绝对位置

绝对定位是最容易理解的。从CSS
position
属性开始：

position: absolute;

这会告诉浏览器，任何要定位的内容都应该从文档的正常流中删除，并放置在页面上的确切位置。它不会影响HTML中在它之前或之后的元素在网页上的定位方式，但是它将服从它的父元素的定位，除非您覆盖它

如果要将元素定位在距离文档窗口顶部10像素的位置，可以使用
顶部
偏移到
位置
将其与
绝对
定位：

position: absolute;
top: 10px;

然后，该元素将始终从页面顶部显示
10px
，而不管元素下面或上面通过了什么内容（视觉上）

四个定位属性是：

top
右侧
底部
左侧
要使用它们，需要将它们视为偏移特性。换句话说，位于
right:2px
位置的元素不会向右移动
2px
。它的右侧与窗口的右侧（或其覆盖父窗口的位置）偏移
2px
。其他三个也是如此

相对定位

位置：相对

相对定位使用与绝对定位相同的四个定位属性。但是，它不是基于浏览器视图端口来确定元素的位置，而是从元素在正常流中的位置开始

例如，如果网页上有三个段落，而第三个段落上放置了
位置：相对
样式，则其位置将基于其当前位置偏移，而不是从视图端口的原始侧面偏移

第1段

第2段

第3段

在上述示例中，第三段将位于容器元素左侧的
3em
，但仍将位于前两段的下方。它将保持在文档的正常流程中，只是稍微偏移。如果将其更改为
位置：绝对，它后面的任何内容都将显示在它的顶部，因为它将不再处于文档的正常流程中

注意事项：


绝对定位的元素的默认
width
是其内容的宽度，而相对定位的元素的默认
width
是其可填充空间的
100%

可以使用与绝对定位元素重叠的元素，而不能使用相对定位的元素（本机即不使用负边距/定位）



从中抽取的地块：
相对定位和绝对定位实际上都是相对的，只是框架不同而已。“绝对”定位是相对于另一个封闭元素的位置。“相对”定位是相对于元素本身在没有定位的情况下的位置

这取决于你的需要和目标，你使用哪一个。当您希望将某个元素从其在元素流中的位置置换时，“相对”位置是合适的，例如，使某些字符显示在上标位置。“绝对”定位适用于将一个元素放置在由另一个元素设置的坐标系中，例如用一些文本“套印”图像

作为一种特殊情况，使用无位移的“相对”定位（仅设置
position:relative
）将元素作为参考框架，以便可以对其内部的元素（在标记中）使用“绝对”定位.
另一件需要注意的事情是，如果希望将绝对元素限制在父元素中，则需要将父元素的位置设置为相对。这将使子元素包含在父元素中，并且它不会与整个窗口“相对”

我写了一篇文章，给出了一个简单的例子，产生了以下影响：


它有一个绿色div，绝对位于父黄色div的底部

Marco Pellicciotta:元素在另一个元素中的位置可以是相对的，也可以是绝对的，与它所在的元素有关

如果您需要在浏览器窗口的视角中定位元素，最好使用position:fixed（位置：固定）
给出答案，因为我的声誉不足以发表评论。但不要把这看作是一个答案，只是一个额外的信息，就像我自己一样，在页脚和定位方面都有一些问题

设置页面时，使页脚始终位于底部，位置为绝对位置，主容器/包装器始终位于相对位置

然后，我发现我的文本内容有一些问题，同一内容中有一个菜单（页眉和页脚之间的白色部分），当将这些设置为绝对时，页脚不再向下
 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}