Css 相对与绝对之差

我正在读这篇文章，我不明白为什么相对定位的div会受到主体的影响，而绝对定位的框会忽略它？
当它们被定位在另一个元素中时，它们的行为不应该是相同的吗

CSS：

body {
     display: block;
     margin: 8px;
}

#box_1 { 
     position: relative;
     width: 200px;
     height: 200px;
     background: #ee3e64;
}
#box_2 { 
     position: absolute;
     top: 0;
     left: 100px;
     width: 200px;
     height: 200px;
     background: #44accf;
}

在所示的示例中：

对于relative，relative没有上/下/左/右，所以它会停留在它应该停留的地方。（主体有其自己的边距和由浏览器定义的填充，您可以覆盖这些边距和填充）

---

对于绝对，我们有顶部和左侧，所以它稍微向上，因为它忽略了任何其他项。

基本上，您有四个位置状态，如下所示：

• 静态（默认）
• 相对的
• 固定的
• 绝对的

相对和绝对之间的区别在于相对是相对于自身的（

left:15px

将在其左侧填充15px），但绝对是相对于其父级（即第一个非静态父级）并应用相同属性（left:15px）将导致它从父元素的左边缘偏移15px

---

这实际上是一项令人着迷的研究，将极大地帮助理解网页布局。

上述解释和描述都很好，但对于普通人或初学者来说，很难理解。 很简单

相对：相对类似于无定位。即使您没有使用relative，也会使div如下所示：

margin-left:10px;

它会向左移动，有10px的空间； 同样，如果你喜欢这个： 位置：相对位置

margin-left:10px;

这与没有使用亲属的情况相同。 如果绝对值用于同一序列中的其他div： 位置：绝对位置

margin-left:10px;

它将总共向左移动10+10=20px的余量。 因为其中添加了第二个绝对div的10px和相对div id的10px。 这类似于：

#div1{
float:left;
margin-left:10px;
} 
#div2{
float:left;
margin-left:10px;
}

---

absolute

是进行页面布局的最佳选择。它应该有由CSS导入的左上角和右下角。而

relative

是在没有任何CSS标记的情况下完成的

这里是位置：绝对和位置：相对的简单解释。

使用绝对位置，我们可以将html元素移动到页面上的任何位置。如果我们不定义任何位置元素，那么它将从body元素获取位置，否则它将从最近定义的位置元素获取位置。 下面是一个例子

在本例中，“div2”的位置来自“div1”元素

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1>
<div id='div2' style="  position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>

这是第一个位置元素
这是一个绝对位置的航向

在这种情况下，“div2”从body元素获取位置，因为没有定义位置

  <div id='div1'> 
    <h1>This is the first position element</h1>
    <div id='div2' style="  position: absolute;left: 100px;top: 150px;">
    <h2>This is a heading with an absolute position</h2>
    </div>
    </div>

这是第一个位置元素
这是一个绝对位置的航向

通过相对位置，html元素可以从正常位置移动 位置。下面是示例。

在这种情况下，它将从左10px和下10px的位置移动

<div id='div2' style="  position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>

这是一个绝对位置的航向

relative elements due具有left、top等属性，它们确实会影响元素的位置。对于不确定性，我指的是一个示例。