了解css中的相对位置[重复]答案

【问题标题】：Understanding relative position in css [duplicate]了解css中的相对位置[重复]
【发布时间】：2019-08-16 02:54:11
【问题描述】：

关注这个link。

它说：

具有位置的元素：relative;相对于其正常位置进行定位。

我们如何定义“正常位置”？它是在父元素的上下文中还是在整个屏幕（视口）的上下文中？

【问题讨论】：

这是我试图理解相对位置的方式。相对位置：它在 DOM 中的位置或更好的查看方式 - 该特定元素的起始位置。设置相对定位后，您可以将其从当前起始位置向任意方向移动。

标签： css css-position

【解决方案1】：

“正常位置”是在DOM的上下文中，指的是Normal flow：

首先，通过获取元素的内容，然后在它们周围添加任何填充、边框和边距来布置单个元素框。

默认情况下，块级元素的内容是其父元素宽度的 100%，并且与其内容一样高。内联元素与它们的内容一样高，和它们的内容一样宽。

这在CSS flow layout中有更详细的解释：

普通流或流布局是块和内联元素在对其布局进行任何更改之前显示在页面上的方式。流程本质上是一组在您的布局中协同工作并相互了解的事物。一旦某些东西从流程中取出，它就会独立工作。

在正常流程中，内联元素以内联方向显示，即按照文档的写作模式在句子中显示单词的方向。块元素一个接一个地显示，就像该文档的写作模式中的段落一样。因此，在英语中，内联元素一个接一个地显示，从左侧开始，块元素从顶部开始并向下移动。

值得注意的是，所有元素默认都有静态positioning：

静态定位是每个元素的默认设置——它只是意味着“将元素放在文档布局流中的正常位置——这里没什么特别的。”

相对定位只允许修改位置：

这与静态定位非常相似，只是一旦定位的元素在正常布局流程中占据了它的位置，您就可以修改它的最终位置。

【讨论】：

【解决方案2】：

Normal Position 是元素在 DOM 中的实际位置。如果您在下面的示例中删除了 div 的 left 属性，那么它将被移回其正常位置。

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>

希望对你有帮助！

【讨论】：

【解决方案3】：

正常位置是指某个元素在视口内的初始位置。

如果该对象具有 position: relative 设置，您可以相对移动（顶部、右侧、底部和左侧）对象，并且它将根据同一元素的起始位置移动。

另外，假设您有一个将位置设置为相对位置的父 div；然后。在它里面你有另一个位置设置为绝对的div。第二个元素将“绝对”在其父上下文/大小中移动，这是具有相对位置的 div。

看看this link，这样你就会对它的工作原理有一些额外的了解。

我知道一开始看起来有点奇怪，但你可以通过练习轻松掌握。

【讨论】：

【解决方案4】：

相对意味着它与页面上的内容相关。如果它与内联集在一行中，则它相对于它旁边的那个 - 这意味着它将定位在它旁边，相对于没有任何位置的 div 通常会去的位置。

因此，如果页面上没有任何内容，它将与所有其他内容一样流动，并默认位于左上角。

【讨论】：