CSS背景下面的另一个背景，但应该是

Question

我有一个奇怪的问题。我有这样的结构：

<div id="content"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

而且在我的CSS我有这样的：

#content { 
    position: relative; 
    background-image: url(content.png); 
} 
#content #one { 
    position: absolute; 
    background-image: url(one.png); 
} 
#content #two { 
    position: absolute; 
    background-image: url(two.png); 
} 

问题是：所有的背景都在他们的位置，我希望他们渲染，只表示＃内容BG是以上＃ #one和#two bg。但我希望#one和#two下面的#content bg。我已经尝试设置z-index的，但这不起作用。为什么是这个，我该如何解决它？

W3C Validator告诉我，我在HTML和CSS中没有错误。我测试了FF6和FF7和IE9。

Answer 1

不知道您是否知道，但您必须将每个div相对定位以使z-index正常工作。给一个去:)

myitem{ 
position:relative; 
z-index:x; 
} 

Answer 2

z-index似乎并不在`岗位工作：静态的，这是元素的默认。
这是设计。
对不起，我不能更好地解释。

您可以在此页面进行测试：http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

你将不得不在#page使用position: relative;。

Answer 3

这是您发布的CSS代码略有修改，以显示DIV的“一”和“两个”位于“内容”之上并且保持DIV“一”不受DIV“两个”的限制...

<style type="text/css"> 
    #content 
    { 
     position: relative; 
     background-image: url('images/banner10.jpg'); 
     height: 400px; 
     width: 600px; 
    } 

    #content #one 
    { 
     position: absolute; 
     background-image: url('images/flag.jpg'); 
     height: 200px; 
     width: 400px; 
     color: black; 
     font-weight: bold; 
     font-size: 100px; 
    } 

    #content #two 
    { 
     position: absolute; 
     background-image: url('images/banner18.jpg'); 
     height: 200px; 
     width: 400px; 
     top: 200px; 
     color: White; 
     font-weight: bold; 
     font-size: 100px; 
    } 
</style> 

有了这个网站：

<div id="content"> 
    <div id="one">ONE 
    </div> 
    <div id="two">TWO 
    </div> 
</div> 

这是什么样子：

如果您有背景问题，您显然不会将DIVS的所有CSS都显示出来......必须有一些其他代码导致它，因为您可以看到它的工作原理很好。我在每个主流的现代浏览器中测试了它，看起来完全一样。如果你发布了所有与这些DIV标签相关的CSS，这将有所帮助。