如何使绝对元素响应式流动？答案

【问题标题】：How to to make absolute elements flow responsively?如何使绝对元素响应式流动？
【发布时间】：2016-06-06 03:15:40
【问题描述】：

我将这些图像定位为绝对值，左/上为百分比。

但是当我缩小浏览器宽度时，图像开始重叠。我还没有设置第 3 行和第 4 行的位置，但是您可以看到它们相互重叠。

我猜这是因为图像的设置百分比距离？如何定位图像，以便它们在浏览器宽度减小时保持相同的格式？

我的容器设置为相对块，图像为绝对值，百分比宽度和像素高度。

我从这个设计http://builtbybuffalo.com/ 中得到了这个想法，但我不知道他们是怎么做到的。

【问题讨论】：

我不知道你是否注意到，但在他们的页面上，六边形根本没有调整大小（嗯..只有在移动视图上变成矩形......）
当然可以，它有几个断点。相关的是max-width: 1180px
@m1。不，他们不会调整大小。拿一把尺子把它放在屏幕上，自己看看。所有这些六边形所做的只是所有 inline-block 元素会做的：如果没有可用空间，它们会漂浮在下面。
它们是内联的吗？我以为他们是绝对定位的。当图像的顶部/底部发生碰撞时，我看不出它们如何彼此浮动。
@RokoC.Buljan 谢谢！负边距工作正常。我现在只需要添加媒体查询。

【解决方案1】：

他们这样做的方式是使用media queries。基本上，当内容开始看起来很糟糕时，他们会设置一个断点，并添加额外的 CSS 来进行必要的调整。

您可以在他们的 css here 中看到这一点。在该文件中搜索此字符串：@media screen and (max-width: 1180px) 并查看其下方的 CSS（您应该格式化 CSS，因为它已被缩小，您可以使用 Chrome 开发工具或类似 this 的工具来执行此操作）。

【讨论】：

我看到很多宽度变化。是容器的宽度吗？而且我没有看到顶部/右侧/底部/左侧的变化——这是否意味着图像不是绝对定位的？我知道他们使用媒体查询，但我很好奇图像是如何定位的。
我的意思是，只要我缩小浏览器宽度，图像就会开始重叠。