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

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

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

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

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

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

Here's the fiddle without media queries.