调整窗口大小并将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那么它将与父元素一起移动调整大小