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

- Gil Goldshlager

Answer 1

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

如果您更改容器样式如下：

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

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

我认为，除非使用媒体查询并修改元素的top: 40%;样式，否则不可能在不垂直调整窗口大小的情况下将它们向上移动。

这是没有使用媒体查询的演示。

- Mathias Rechtzigel

---

非常感谢您的回复，我想我刚刚发现可以使用边距（margin）而不是top/left来以响应式的方式定位元素，这不是吗？ 这是一个新的示例： http://jsfiddle.net/QV6DR/2/ - Gil Goldshlager