Question

我必须在其父元素的中间放置一些文本。我用以下代码实现了它：

＆＃13;

#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
}

＆＃13;

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

＆＃13;

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

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

我只是想了解相对定位幕后发生的事情。

我知道这两个教程之间的基本区别就像这个＆＃34; 绝对位置意味着使用右上角左下方来定位自己相对于最近的祖先，其位置为绝对或相对位置。位置相对意味着元素相对于其即时父母的位置。＆＃34;

按照上面的定义，在相对和绝对定位情况下，父亲是p的div1。

那么在我的理解中，我还缺少什么呢？这会给我不同的结果？

Answer 1

我只是想了解相对定位幕后发生的事情

“从许多教程”突出显示的说明不正确，尤其是对于位置相对。

根据specification，相对位置意味着：

一旦盒子按照正常流动布置或浮动，它可能相对于该位置偏移。这称为相对定位。

简而言之，相对位置对自身而言意味着“相对”，而不是其父亲。

那么在我的理解中我还缺少什么呢？这会给我不同的结果？

我认为这个问题已经从上面的解释中得到了回答。如果#p1定义为position: relative;，则其right＆amp; top都与其原始位置相关（未定义position时）。这就是为什么你会在它上方看到一个空白区域（如margin-top，由top: 3.21em引起）和左偏移。

Answer 2

您可以使用transform属性修复此问题。问题是当使用绝对位置时，不计算元素的宽度。浏览器将外部左侧或外侧右侧置于相对父级的50％。在您的示例中，＃p1选择器右外侧的放置率为48％，如果您将其更改为50％，则右侧将精确放置在父元素的50％处。

要纠正元素的宽度，您可以使用它：

#p1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

＆＃13;

#div1 {
    position: relative;
    margin: 0;
    padding: 0;
}

#div2 {
    width: 100%;
    position: relative;
    height: 3.21em;
    margin: 0;
    background-color: red;
}

#p1 {
    display: block;
    left: 50% ;
    transform: translateX(-50%);
    top: 3.21em;
    position: absolute;
    background-color: green;
    margin: 0
}

＆＃13;

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

＆＃13;

translate属性使用元素宽度来转换自身。希望这会有所帮助。

使用相对和绝对属性在div中间的元素位置

2 个答案: