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

Elementsは常にrelativeで最初の親要素にrealtiveされています。 （または静的および固定以外のもの）ので、それを修正する

あなたは親

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

またはそれはabsoluteは相対的要素の外にツールチップを移動位置とにかくだからでposition: relativeを使用しないようにする必要があります。 position:absolute;を使用

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

Answer 3

はdivがposition:relative;をマークし、最も近い位置付け要素、この場合にツールチップを位置決めすべきです。 CSS3 reference on absolute positioningを参照してください。

したがって、絶対配置コンテキストに影響を与えないように、相対配置を持つ親要素を心配する必要はありません。

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

私はあなたの質問を誤解している場合を除き、もっと詳細な例を挙げてください。

EDIT：

あなたが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';