如何在使用position：absolute時將元素放置在窗口中間？

這是我想要做的：我有一個彈出窗口小部件，當用戶點擊一個鏈接時出現。如何在使用position：absolute時將元素放置在窗口中間？

我需要的是將這個小部件放在屏幕的中間位置，不管用戶上下滾動多少或多少，但是不會阻止他在彈出窗口變得可見之後滾動頁面。

既然不能知道小部件將被追加（它會動態創建的），我不認爲一個CSS的解決方案是爲我好

窗口小部件是用jQuery的

這當用戶點擊鏈接，目前確實的定位代碼：

$(this).css({ 
     position: 'absolute', 
     top: $(document).scrollTop() + $(this).height()/2, 
     left: '50%', 
     'margin-left': -($(this).width()/2), 
     'z-index': 50 
    });

這一切正常，但我有問題時，小部件是一個相對定位的元素裏面。

來源

2012-08-30 Loupax

你可以分享你曾經試過的嗎？你失敗的地方在哪裏？ – Scott

已更新我的問題 – Loupax

您應該在主體頂部創建一個'

'，並在用戶單擊鏈接時將活動小部件移動到其中。這將解決相對定位問題。您可以使用jQuery的[clone（）方法]（http://api.jquery.com/clone/） – Scott

您應該在正文的頂部創建一個<div id="widgetContainer"></div>，並在用戶單擊鏈接時將您的活動小部件移動到其中。這將解決相對定位問題。你可以使用jQuery的clone（）方法。

function showWidget(id) 
{ 
    /* Perform other actions to setup your widget */ 
    $('#widgetContainer').html(""); 
    $('#' + id).clone().appendTo('#widgetContainer'); 
}

記住要widgetContainer相對（CSS）

#widgetContainer { 
    position: relative; 
}

如果您使用@西蒙 - 阿諾德CSS與此修復程序一起，應解決您的問題

left: $('body').width()/2,

來源

2012-08-30 14:42:16 Scott

我所做的是更改構件的構造函數，並在創建時將其添加到，這解決了我的問題。奇蹟般有效！ – Loupax

很高興你能工作。 – Scott

參考身體寬度/ 2而不是50％

$(this).css({ 
    position: 'absolute', 
    top: $(window).height()/4, 
    left: ($(this).parent().offset().left * -1) + ($('body').width()/2), 
    'margin-left': -($(this).width()/2), 
    'z-index': 50 
});

來源

2012-08-30 14:48:17

這工作，同時使我的代碼編輯更少的數量編輯我衝了它...它仍然定位元素相對於它的父母...對不起假冒接受... – Loupax

現在嘗試與父偏移補償。 –

如何在使用position：absolute時將元素放置在窗口中間？

回答

相關問題