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;
} 

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

我认为在不垂直调整窗口大小的情况下将它们垂直向上移动的唯一方法是使用媒体查询并修改元素上的 top: 40%; 样式。

Here's the fiddle without media queries.