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 像素，并且您的元素相对于容器顶部的 20%（始终为 200 像素）定位，所以当浏览器窗口调整大小时，它们将无法向上移动。

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

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

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

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

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