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

Question

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

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

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才能申请。

Answer 2

您的#content区域缺少定位：

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