css - CSS 响应式元素之间的绝对位置

Question

我希望在构建响应式设计方面获得帮助。
问题是我不知道如何将元素定位为绝对元素，但与它们之间的最高比例保持相同的距离。

这是一个示例的链接，您可以在该示例中调整窗口宽度并看到两个元素彼此远离，而不是始终从顶部保持它们之间的相同空间。所以我正在寻找的是对整个事物进行假缩放，这样它只会变得更小/更大，但看起来总是一样的。

当窗口调整大小时，如何使元素上升并从顶部缩小空间？

http://jsfiddle.net/QV6DR/

.container {
    width: 100%;
    height: 1000px;
    position: relative;
    background: #eee;
}

.container div {
    height: 0;
    position: absolute;
    background: #ccc;
}

.elm1 {
    width: 20%;
    padding-bottom: 20%;
    top: 20%;
    left: 5%;
}

.elm2 {
    width: 30%;
    padding-bottom: 30%;
    top: 40%;
    right: 10%;
}

Answer 1

因为您的容器的高度为 1000 像素，并且您的元素相对于容器顶部（始终为 200 像素）定位 20%，所以当浏览器窗口调整大小时，它们将无法向上移动。

如果将容器样式更改为以下内容：

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #eee;
} 

当您的浏览器窗口垂直调整大小时，元素将向上移动。

我相信在不垂直调整窗口大小的情况下垂直向上移动它们的唯一方法是使用媒体查询并修改顶部：40%；元素的样式。

这是没有媒体查询的小提琴。