移动设备的 CSS 定位答案

【问题标题】：CSS Positioning for mobile devices移动设备的 CSS 定位
【发布时间】：2012-03-01 01:40:22
【问题描述】：

我的页面在桌面浏览器上正常显示，但在移动设备上不正常。该网址是[问题解决后删除]。左上角的标志是绝对定位的。标题下方的 div 也绝对定位为left: 0。目前div#page 有position:relative，但我尝试将相对定位放在许多包装器div 上，但没有成功。我在每个单独的 php 文件（例如 header.php、body.php）中也有 php 输出缓冲区。

幻灯片使用了一个调用 jQuery Cycle 插件的 WordPress 插件，并且还声明了绝对和相对定位，因此它可能会导致混淆什么是相对什么是绝对。但是我尝试在看似每个组合中的元素上附加相对和绝对定位，但仍然没有运气。

附言我知道 CSS 是一团糟，我打算在弄清楚这个定位问题后进行重构。

【问题讨论】：

如果你尝试左浮动？
向左浮动不能解决问题。我最初将整个布局基于 960 网格系统，按照应该渲染的方式将它们彼此浮动。但我想实现与徽标和内容的重叠效果。

标签： html css positioning

【解决方案1】：

看起来您有一个媒体查询，它在某个断点处添加以下 css，这会影响移动设备的大小。

#main #content { margin: 0 7.6%; width: auto; }

如果您能准确说明您认为移动版本有什么问题，这将有助于我们提供更好的答案。您是否正在寻找要在滑块图像下方出现的描述文本？

【讨论】：

移动版中，header下面的所有内容都被推到右边，右边的内容被截断。我认为它是由我对徽标的绝对定位所决定的像素数量推动的。
我想完成类似<div id="wrapper"><div id="headerContainer">logo</div><div id="contentProper">stuff</div></div> 的操作，其中标题具有固定高度、可见溢出和最高 z-index，因此徽标看起来好像与内容重叠。