CSSで絶対位置の動的なボタンを配置

Question

私はbuttonsのセットを持っています。これはJqueryで追加されています。今私はpositionこれらのボタンを正確にabove the elementをクリックしたいので、私は要素の位置を取得し、ボタンにCSSのプロパティを入れようとしています。

問題は、私は適切に配置することができないんだけどで、私も、私は、相対的な固定が、その作業はありませんを入れてみました、absoluteとしてrelativeとbuttonsとしてbase element's positionを作りました。さて置く

.nitssection { 
    position: relative; 
} 

：基本要素の

<div class="section nitssection" data-nitsid="6"> 
    <div class="container"> 
.... 
    </div> 
</div> 

ポジション：たとえば

、私はボタンを配置したい

HTML要素、私はクラスnitssectionを通してそれを呼んでいますボタン：

<div id="#" class="clearfix nitsoption" style="display: none;"> 
    <a href="#" class="btn btn-circle btn-sm default sorthandle"> 
     Sort <i class="fa fa-arrows"></i> 
    </a> 
    <a href="#" class="btn btn-circle btn-sm default"> 
     Edit <i class="fa fa-pencil-square-o"></i> 
    </a> 
    <a href="#" class="btn btn-circle btn-sm default"> 
     Clone <i class="fa fa-clone"></i> 
    </a> 
    <a href="#" class="btn btn-circle btn-sm default"> 
     Delete <i class="fa fa-trash"></i> 
    </a> 
</div> 

elementsの

idがdynamicであり、次は私がボタンを配置しようとしているjQueryのです：

$('.nitssection').click(function(e) { 
    var nitsbutton = $(this).data("nitsid"); 
    var x=$(this).offset(); 
    var y=$(window).innerWidth(); 
    var xcenter= x.top-30; 
    var ycenter=y/2; 
    $('#' + nitsbutton).css({ 
     'position': "absolute" 
     , 'top': xcenter 
     , 'left': ycenter-150 
     , 'z-index': "99999" 

    }).fadeIn(400).click(function (e) { 
     e.preventDefault(); 
    }); 
    $(this).click(function(e){ 
     e.stopPropagation(); 
    }) 
}); 

あなたはセクションの一部にクリックしたら、あなたはボタンがされている、following linkで見ることができるように下に表示されます。溶液を見出し

Answer 1

、Iはtopを計算して生成された要素にトップ値を加算した

。 absolute positionにトップ値を追加すると、parent elementのトップ値が計算されるので、私の質問では、オフセット値で計算されるトップ値を削除しました。続いて、コードから削除されます。

var x=$(this).offset(); 
var xcenter= x.top-30; 

ようなので、私の最終的なコードが見える：

$('.nitssection').click(function(e) { 
    var nitsbutton = $(this).data("nitsid"); 
    var y=$(window).innerWidth(); 
    var ycenter=y/2-200; 
    $('#' + nitsbutton).css({ 
     'position' : "absolute" 
     , 'top': -35 
     , 'left': ycenter 
     , 'z-index': "99999" 

    }).fadeIn(400).click(function (e) { 
     e.preventDefault(); 
    }); 
    $(this).click(function(e){ 
     e.stopPropagation(); 
    }) 
}); 

が...それが誰かを役に立てば幸い:)