当元素绝对位置时，JS根据主体获取元素位置

Question

我需要构建一个工具提示，但是我需要根据身体放置工具提示，因为它的位置是绝对的，并且我不希望任何亲生父母破坏我的风格。

 <div style="position: relative;">
    <input>
    <p class="tooltip">tooltip</p>
 </div>

我需要工具提示在输入中，但始终相对于身体。

我该如何计算？

Answer 1

position: absolute元素始终relative的第一个父元素。 （或除静态和固定以外的任何内容）

因此，要解决此问题，您需要避免在父级上使用position: relative

<div>
   <input>
   <p class="tooltip">tooltip</p>
</div>

还是因为absolute定位，将工具提示移出相关元素。

<p class="tooltip">tooltip</p>
<div style="position: relative;">
   <input>
</div>

Answer 2

使用position:absolute; 应该相对于最近定位的元素定位工具提示-在这种情况下， div标记为position:relative; 。 （有关绝对定位，请参见CSS3参考 。）

因此，在您的示例中，您无需担心任何具有相对位置的父元素，因为它们不会影响绝对位置上下文。 您应该能够简单地使用：

<div style="position: relative;">
  <input>
  <p class="tooltip" style="position:absolute; top:0; left:0;>tooltip</p>
</div>

除非我对您的问题有误解，否则请提供更详细的示例。

编辑：

如果您尝试避免使用position: relative ，则可以使用javascript设置工具提示位置：

var input = document.getElementById('input-id');
var tooltip = document.getElementById('tooltip-id');

tooltip.style.left = (input.offsetLeft)+'px';
tooltip.style.top = (input.offsetTop)+'px';

Answer 3

将类更改为样式：

<div>
  <input>
  <p class="tooltip" style="position:relative;">tooltip</p>
</div>