CSS 响应式元素之间的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19864424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS responsive absolute position between elements
提问by Gil Goldshlager
I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.
我想在构建响应式设计方面获得帮助。
问题是我不知道如何将元素定位为绝对但与它们之间的最高比例保持相同的距离。
Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top. So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.
这是一个示例的链接，您可以在其中调整窗口宽度的大小，并看到两个元素正在相互远离，而不是始终保持它们之间的距离相同。所以我正在寻找的是对整个事物进行假装缩放，这样它只会变得更小/更大，但看起来总是一样的。
How can I make the elements to go up and shrink the space from top when window resize please?
当窗口调整大小时，如何使元素向上并从顶部缩小空间？
.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%;
}
回答by Mathias Rechtzigel
Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.
因为您的容器的高度为 1000 像素，并且您的元素相对于容器顶部的 20%（始终为 200 像素）定位，所以当浏览器窗口调整大小时，它们将无法向上移动。
If you change the container styles to the following:
如果将容器样式更改为以下内容：
.container {
width: 100%;
height: 100%;
position: absolute;
background: #eee;
}
The elements will shift up when your browser window is resized vertically.
当您的浏览器窗口垂直调整大小时，元素将向上移动。
I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%;styles on your elements.
我相信在不垂直调整窗口大小的情况下垂直向上移动它们的唯一方法是使用媒体查询并修改top: 40%; 元素上的样式。
