绝对定位元素上的 Z-Index 问题

Question

我试图让一个绝对定位的元素出现在另一个元素后面。我已经设置了 z 索引，但似乎没有任何效果。我试图放置在背景中的元素却位于最前面。

所讨论的两个元素都位于位置设置为相对的容器内。据我了解，这将创建一组新的堆叠元素，尽管我不确定这是否真的很重要。

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;
      }