如何創建一個與頁面滾動的中心div？

我有一個網站，我想把DIV放在這個網站的上方，輸入電子郵件和按鈕「訂閱」。它應該像我們都喜歡的廣告一樣工作。所以這個div應該總是在屏幕的中心，並且它應該在網站的「上方」，並且在用戶瀏覽頁面時滾動。當用戶點擊X時，它應該關閉。如何創建一個與頁面滾動的中心div？

如何做到這一點？

來源

2010-11-17 Tomasz Smykowski

查看CSS position:fixed和z-index屬性。要將項目水平和垂直居中，請給它固定的尺寸，將其放置在50％，50％處，然後使用負邊距。例如：

#annoying-floater { 
    z-index:10; 
    position:fixed; 
    top:50%; left:50%; 
    width:640px; height:480px; 
    margin-left:-320px; margin-top:-240px 
}

要 '關閉' 它，通過JS設置display到none。例如：

window.onload=function(){ 
    document.getElementById('annoying-floater-closer').onclick = function(){ 
    document.getElementById('annoying-floater').style.display='none'; 
    } 
}

來源

2010-11-17 19:32:01 Phrogz

謝謝你的作品！ – 2010-11-17 20:08:05

如何使它在IE8中工作？矩形遠遠地留在瀏覽器窗口中。 – 2010-11-17 20:19:47

@tomaszs它在IE8中對我來說工作正常，無論是進出兼容性視圖。這是[一個簡單的測試案例]（http://phrogz.net/tmp/annoyer.html）展示它的行動。 – Phrogz 2010-11-17 20:58:51

您的意思是說，由於頁面滾動div將保持居中？在這種情況下，使用position：fixed來放置div;這將工作，除了< IE8，要得到那個在那裏工作，使用this

來源

2010-11-17 19:33:31

哦，是的，還有z-index。 – 2010-11-17 19:34:00

如何創建一個與頁面滾動的中心div？

回答

相關問題