在绝对定位的元素上使用Z-Index的麻烦

Question

我试图让一个绝对定位的元素出现在另一个元素后面.我已经设置了z-indices,但似乎没有任何影响.我试图在背景中放置的元素是最重要的.

有问题的两个元素都位于容器中,其位置设置为相对.我的理解是,这将创建一组新的堆叠元素,虽然我不确定这是否真的很重要.

HTML:

    <div id="wrapper">
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="bg">&nbsp</div>
    </div>

CSS:

      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px;
      }

      #content{
        width: 300px;
        z-index: 100;
      }

      #bg{
        background: #ddf;
        position: absolute;
        bottom: 0;        
        left: 0;
        top: 0;
        width: 40%;
        z-index:1;
      }

你可以在这里看到结果:http://jsfiddle.net/GsG28/

这在Chrome和IE中都有发生,尽管我还没有测试过其他浏览器.我得到的是这样的:

我想要的是文本在蓝色背景之上.

Answer 1

#content需要position: relative;为z-index适用于它.