當元素絕對位置時，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>