了解 css 中的相对位置
Understanding relative position in css
关注这个link。
它指出：
An element with position: relative; is positioned relative to its normal position.
我们如何定义'normal position'？它是在父元素还是整个屏幕（视口）的上下文中？
Normal Position 是 DOM 中元素的实际位置。如果您在下面的示例中删除 div 的左侧 属性，那么它将移回其正常位置。
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
希望对您有所帮助！
“正常位置”在 DOM, and refers to Normal flow 的上下文中：
First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.
By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.
这在 CSS flow layout 中有更详细的解释：
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
值得注意的是所有元素默认有staticpositioning：
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."
相对定位只允许修改位置：
This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.
正常位置是指某个元素在视口中的初始位置。
如果这个 object 有 position: relative 设置，你可以相对移动（顶部、右侧、底部和左侧）一个 object，它将根据同一元素的起始位置移动。
此外，假设您有一个 parent div 的位置设置为相对；然后。在它里面你有另一个 div 位置设置为绝对。第二个元素将 'absolutely' 移动到它的 parent context/size 中，也就是 div 的相对位置。
看看 this link 这样您就可以对它的工作原理有一些额外的了解。
我知道一开始看起来有点奇怪，但你可以通过练习轻松掌握。
相对表示相对于页面内容。如果它在带有内联集的一行中，它是相对于它旁边的那个 - 这意味着它将被定位在它旁边，相对于没有任何位置的 div 通常会去的地方。
因此，如果页面上没有任何内容，它将与所有其他内容一样流动，并且默认位于左上角。
关注这个link。
它指出：
An element with position: relative; is positioned relative to its normal position.
我们如何定义'normal position'？它是在父元素还是整个屏幕（视口）的上下文中？
Normal Position 是 DOM 中元素的实际位置。如果您在下面的示例中删除 div 的左侧 属性，那么它将移回其正常位置。
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
希望对您有所帮助！
“正常位置”在 DOM, and refers to Normal flow 的上下文中：
First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.
By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.
这在 CSS flow layout 中有更详细的解释：
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
值得注意的是所有元素默认有staticpositioning：
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."
相对定位只允许修改位置：
This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.
正常位置是指某个元素在视口中的初始位置。
如果这个 object 有 position: relative 设置，你可以相对移动（顶部、右侧、底部和左侧）一个 object，它将根据同一元素的起始位置移动。
此外，假设您有一个 parent div 的位置设置为相对；然后。在它里面你有另一个 div 位置设置为绝对。第二个元素将 'absolutely' 移动到它的 parent context/size 中，也就是 div 的相对位置。
看看 this link 这样您就可以对它的工作原理有一些额外的了解。
我知道一开始看起来有点奇怪，但你可以通过练习轻松掌握。
相对表示相对于页面内容。如果它在带有内联集的一行中，它是相对于它旁边的那个 - 这意味着它将被定位在它旁边，相对于没有任何位置的 div 通常会去的地方。
因此，如果页面上没有任何内容，它将与所有其他内容一样流动，并且默认位于左上角。