調整窗口大小並將div保持在同一位置

Question

當窗口調整大小時，我目前遇到了將div保留在相同位置的問題。在這個例子中，它是.add div。我遇到的問題是它在頁面的視圖區域之上，而且我無法滾動到頁面的那一部分，因此我無法在調整大小時看到它。

這是代碼。 http://jsbin.com/kazizeruxi/1/

這是我曾嘗試處理

<div class = "add" align = "center"> 
<!--Everything inbetween --> 
</div> 

理想我想保持的條目（最遠可達左）留在左上角無論它是如何調整的一部分。 我試圖搞亂媒體查詢，但無濟於事。對於不同的瀏覽器大小來說，它效率很低。

有什麼建議嗎？

Answer 1

只要給他們一個absolute position。

.add { 
    position: absolute; 
} 

Answer 2

正確的方式做到這一點是給你的元素position : fixed那麼它將從根元素或身體不是父固定位置。

讓我們說你希望它在屏幕上的中心，如果你有一個固定的和高度，你可以使用保證金，而不是變換

.add{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin: -50% 0 0 -50% 
} 

您可以使用此

.add{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%,-50%,0) 
} 

的

如果你給它一個position: absolute和父母有一個position: relaive那麼它將與父元素一起移動調整大小