試圖所以我用得到一個絕對定位的div到另一個相對定位的div

-4

http://jsfiddle.net/zjRga/55/試圖所以我用得到一個絕對定位的div到另一個相對定位的div

我想一個div開拓將出現在當前DIV的頂部，並且不會對要素轉移中居中絕對定位，但我希望它在相對div內水平和垂直居中，無論它位於頁面的哪個位置，我似乎都無法將它放在正確的位置。

更新：解決。幾個小時以來，我一直在爲此着迷。對於任何人，這可能在未來幫助

http://jsfiddle.net/zjRga/60/

簡短的回答：jQuery- element.position（）

來源

2011-12-07 cjsmith

好，因爲downvoting已經開始，並沒有解釋爲什麼，我假設的問題是缺乏方向。這是我可以用css完成的事情，還是我需要這個計算功能 – cjsmith

最好發佈自己的答案並接受它，而不是用您的解決方案編輯您的問題。 – LarsTech

您需要檢查您正在居中的元素的高度和寬度，並相應地設置頂部和左側。

$('.labelEdit').click(function() { 
    var x = $("#editDialog").width()/2 - $("#editItemDialog").outerWidth()/2; 
    var y = $("#editDialog").height()/2 - $("#editItemDialog").outerHeight()/2; 
    $("#editItemDialog").css({"top": y, "left": x}); 
    $('#editItemDialog').show('slow'); 
});

基本上，我們在目標div的中點減去對話框的一半高度設置右上角，並在中點減去對話框的寬度的一半左。

來源

2011-12-07 19:45:08 pbaehr

你的問題有點不清楚。這是刺你想要什麼：http://jsfiddle.net/zjRga/59/。請注意對#editItemDialog的更改。如果這不是你正在尋找的東西，我想至少它會告訴你如何將一個絕對定位的div設置在它的寬度和高度上。

來源

2011-12-07 19:45:00 ScottS

$('#editItemDialog').hide(); 
$('#closeEditItemDialog').click(function() { 
    $('#editItemDialog').hide('slow'); 
}); 

$('.labelEdit').hover(function() { 
       $(this).parent().prev().css('border', 'solid 1px blue');  
      }, function() { 
       $(this).parent().prev().css('border', 'solid 1px white'); 
}); 


$('.labelEdit').click(function() { 
    $('#editItemDialog').center(); 
    $('#editItemDialog').show('slow'); 

}); 
jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", (($(window).height() - this.outerHeight())/2) +  $(window).scrollTop() + "px"); 
    this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
return this; 
}

我得到這個從this answer

來源

2011-12-07 19:46:45 Andres

試圖所以我用得到一個絕對定位的div到另一個相對定位的div

回答

相關問題