html - 使用相对和绝对属性将元素定位在 div 中间

Question

我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它:

#div1 {
  position: relative;
  margin: 0;
  padding: 0;
}

#div2 {
  width: 100%;
  position: relative;
  height: 3.21em;
  margin: 0;
  background-color: red;
}

#p1 {
  display: block;
  right: 48%;
  top: 3.21em;
  position: absolute;
  background-color: green;
  margin: 0
}

<div id="div1">
  <div id="div2">

  </div>
  <p id="p1">
    Hello From Web
  </p>
</div>

但我的问题是，如果我对段落使用 position: relative ，同样的事情不起作用，即，将文本放在中间不起作用，

#p1 {
  display: block;
  right: 48%;
  top:3. 21em;
  position: relative;
  background-color: green;
  margin: 0;
}

我只是想知道相对定位的幕后发生了什么。

我从许多像这样的教程中了解到两者之间的基本区别”position absolute 意味着像使用 top right bottom left 来定位自己相对于最近的祖先的位置，它的位置可以是绝对的也可以是相对的。相对位置意味着元素相对于其直接父元素的位置。”

根据上面的定义，无论是相对定位还是绝对定位，父级都是 p 的 div1 。

那么在我的理解中还缺少什么导致了不同的结果？

Answer 1

我只是想知道相对定位的幕后发生了什么

突出显示“来自许多教程”的描述不正确，尤其是相对位置。

根据specification , 相对位置表示:

Once a box has been laid out according to the normal flow or floated, it may be offset relative to this position. This is called relative positioning.

简而言之，相对位置的意思是“相对于”自身，而不是相对于其父级。

那么在我的理解中我还遗漏了什么导致了不同的结果？

我认为这个问题已经从上面的解释中得到了回答。如果#p1定义为position: relative;，它的right & top都和它的原点相关(当其 position 未定义时)。这就是为什么你会在它上面看到一个空白区域(比如 margin-top，这是由 top: 3.21em 引起的)，以及一个左偏移量。