html - HTML 中的固定位置 div 位于辅助 div 的背景图像前面

Question

我正在为以下问题寻找 HTML/CSS 解决方案。

我目前在我的网页左侧有一个侧边栏类型的元素。在右侧，我想放置几个信息面板。我希望这些信息面板根据窗口的大小自行调整大小，同时保持在侧边栏的右侧。我想为所有这些面板设置单独的背景，让每个面板都有独特的感觉(想想 PowerPoint，但更好)。

为了完成这一切，我在网站上设置了一个固定的 div 作为侧边栏，它的宽度必须正好为 92px。我在这个固定的 div 的右边也有几个 div。我需要让右侧的“面板”div 根据视口(viewport)宽度自行调整大小，所以目前我正在将它们的宽度设置为屏幕的 100%。为了确保背景图像适合“面板”div，无论它们的大小如何，我使用了 background-size:contain; 行。

除一件事外一切正常:“面板”div 位于固定 div 下方，并且这些 div 的背景图像被截断。我做了一个 JSFiddle 来强调这一点:http://jsfiddle.net/32yZL/

您会注意到三行文字“This is a test. This is a test. This is a test.”在左边被切断。这很容易通过向 div 添加 92px 的填充来解决，但我一直无法为“面板”div 的背景图像找到类似的解决方案。

有什么建议吗？

编辑:感谢大家的回复。我已经尝试了所有方法，但没有一个起作用，我认为这是我的错。我不知道 JSFiddle 可以导入外部文件(是的，我知道，我是瞎子)，我创建了一个新文件，希望能更好地强调这个问题:

http://jsfiddle.net/ChrisBush/womLk4c9/

您会注意到 div 的背景图像仍在边栏后面，但文本没问题。我希望背景图片与侧边栏齐平。有什么建议吗？

编辑 2:在对这个元素进行更多工作后，我开始意识到这个问题有多种解决方案。不幸的是，我正在使用我从网络上的网站中提取的一些免费 js 在网站上创建视觉效果，这使事情变得复杂，远远超出了本文的范围，并使您的大部分答案变得无关紧要。我想我将尝试重写一些 js，为此我将在其他地方发表另一篇文章。再次感谢您的所有建议!

Answer 1

http://jsfiddle.net/32yZL/4/

我将右侧幻灯片包裹在 <div id="slide_wrap"> 中我给了margin-left: 92px; .

这将使它们不会出现在您固定的侧边栏下方。

编辑:响应您的代码编辑，这个问题不是它在侧边栏下，而是背景定位固定。如果您删除了 fixed从你的背景声明中，这修复了它。