相对 div 中的绝对定位图像破坏了页面布局答案

【问题标题】：Absolute positioned image in Relative div is breaking page layout相对 div 中的绝对定位图像破坏了页面布局
【发布时间】：2015-02-25 20:01:48
【问题描述】：

我在带有position:relative; 的容器内有一个带有position:absolute;right-300px; 的图像，因为我希望图像从 div 中出来并移到右侧。

你可以看到它在工作here。这是右边的第一张大图。

我遇到的问题是，这会破坏整个页面布局并导致我的页面右侧出现一个空白区域，可以横向滚动到。

如果我将overflow:hidden; 放在容器 div 上，它将隐藏图像的其余部分，我需要图像出来并完全可见。

有人对解决这个问题有什么建议吗？

我试着写一个例子，但我把整个页面都放在上面似乎更好 http://ciaranhanrahan.com/test/

干杯！

【问题讨论】：

我看不到你在那个页面上指的是什么。
好的抱歉 - 这是您在右侧看到的第一张大图。它是一个浏览器和手机，其 300px 位于 960px 网格的右侧。
不要把overflow:hidden放在直接的父元素上，而是放在你的header元素上。（或者只是overflow-x，如果您不想让它尽可能高地显示图像而不会在那个方向被切断。）
类似的问题在这里。 stackoverflow.com/questions/4411362/…
感谢您的建议 -
上的overflow:hidden 会导致图像在底部被切掉

【解决方案1】：

我希望图像从 div 中出来并向右移动

研究您的页面布局，看起来图像根本不需要在<div> 中。

你可以给<img />一个position:absolute;。

然后，您可以在 HTML 源代码的任何位置包含 <img /> 标记。

例如，它是一个 495kB 的图像（即相当重），因此您可以在 HTML 源代码的最后包含绝对定位的 <img />，这意味着对于您页面的首次访问者，该页面将出现加载速度更快。

您不需要将绝对定位的<img /> 嵌套在父元素内 - 这意味着您无需处理负定位、CSS 继承、隐藏溢出等问题。

【讨论】：

嗨 Rounin，所以我明白您关于将其从父元素中取出的观点。但我仍然需要它坐在 960 网格的右侧。我无法定位它absoluteright:0;，因为这会导致它在大屏幕上太远了。我已经更新了链接，按照您的建议向您展示。
你能改为部署position: absolute; left:972px;吗？