响应式站点上的推子出现奇怪的 CSS 定位问题答案

【问题标题】：Strange CSS Positioning issue with a fader on a responsive site响应式站点上的推子出现奇怪的 CSS 定位问题
【发布时间】：2012-06-25 08:39:43
【问题描述】：

我正在开发我主页的原型响应式 wordpress 主题版本。我在主页上遇到了推子的问题。

当图像切换时，它使用 position:absolute 覆盖图片，然后返回 position:relative。

我需要使绝对值相对于菜单的左下角而不是#wrap 的左上角，这样它就不会重叠。

有什么想法吗？

IE 中存在重大的 CSS 兼容性问题，请在 chrome 中尝试。它应该类似于http://epicwebdesign.ca。当浏览器窗口水平缩小时，整个主题进行补偿。

【问题讨论】：

【解决方案1】：

原来我是个白痴，并且通过有史以来最烦人的错字在错误的元素上设置了 position:relative。（.rslider 而不是 .rslides）

【讨论】：

【解决方案2】：

您的主要内容向上浮动，因此要解决此问题，我会将导航和内容都扩展为 100% 并将它们向左浮动以防止它们重叠。

为您的 id 为“navigation”的元素添加 float:left 样式。

然后，对于 id 为“wrapper”的元素，添加 float:left 和 width:100% 的样式。

我只在 Firefox 中对此进行了测试，因此您可能需要调整一些其他样式才能使其在所有浏览器中正常工作。

【讨论】：