HTML/CSS：背景覆盖答案

【问题标题】：HTML/CSS: background overlayHTML/CSS：背景覆盖
【发布时间】：2012-02-09 17:24:30
【问题描述】：

我有一个位于页面中间的背景<div>。在这上面我有一个<div>，里面有一个文字。

如果页面以全屏方式查看，一切似乎都很好。但是如果在小窗口中查看页面，文字就会消失。

如何让文字始终保持在最前面？

代码：

http://jsfiddle.net/w2T79/

图片：

“普通视图：”http://www.suckmypic.net/26632/83735f21.png

【问题讨论】：

【解决方案1】：

给 parent-div 一个 id（例如“容器”），然后将以下代码添加到您的 CSS：

#container {
    position: relative;
}

.txt {
    position: relative;
    z-index: 99999;
}

也许您可以向我们提供您正在处理的页面的链接，因为在 jsFiddle 中只有“文本”可见，没有图像。

【讨论】：

z-index 和 position: relative 在文本元素上可以解决问题。问题是背景 div HTML 代码放置在文本之后，因此浏览器隐含地决定背景应该留在顶部。

【解决方案2】：

那是因为你有一个 70 像素的 margin-top 并且上面的 div 在背景下消失了。

做一个position: relative 和一个high z-index，你就会得到你想要的

【讨论】：

【解决方案3】：

这可以通过将position:relative;z-index:1000; 赋予<p> 标签来实现。在这里检查： http://jsfiddle.net/w2T79/4/ 希望你能这样。

【讨论】：