Проблема с 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;
      }