调整窗口大小并将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%;
  transform: translate3d(-50%,-50%,0)
}

如果你有一个固定的和高度你可以使用margin而不是transform

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

如果你给它一个position: absolute并且父有一个position: relaive那么它将随着resize上的父元素一起移动