JS当元素的位置绝对位置时，获取基于元素的元素的位置

Question

我需要建立一个工具提示，但我需要根据主体定位工具提示，因为它的位置是绝对的，我不想要任何相对的父元素打破我的风格。

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

我需要工具提示在输入上，但总是相对于身体。

我该如何计算这个？

Answer 1

变化类风格：

与 position: absolute

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

Answer 2

元素总是realtive到第一父元素与relative。 （或除静态和固定的东西）

因此，要解决它，你需要避免父

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

或因为它是反正absolute使用position: relative定位移动提示出相对的元素。

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

Answer 3

使用position:absolute;应该相对于最近定位的元素，在这种情况下，标记divposition:relative;工具提示的位置。 （请参见CSS3 reference on absolute positioning。）

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

<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';