CODEWITHSUNDEEP
cssz-indexcss-position
Ryan Elkins
Ryan Elkins

Reputation: 5797

Trouble with Z-Index on an absolutely positioned element

I'm trying to get an absolutely positioned element to appear behind another element. I've set the z-indices but it doesn't seem to have any effect. The element that I am trying to place in the background is instead at the forefront.

Both elements in question are inside a container with a position set to relative. It was my understanding that this would create a fresh set of stacking elements although I'm not sure if that is even really important.

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

You can see the result here: http://jsfiddle.net/GsG28/

This is occurring in both Chrome and IE, although I haven't tested other browsers. What I am getting is this:

enter image description here

What I want is for the text to be on top of the blue background.

Upvotes: 1

Views: 164

Answers (2)

Andres I Perez
Andres I Perez

Reputation: 75409

Your #content area is missing its positioning:

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

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

#content needs a position: relative; for the z-index to apply to it.

Upvotes: 5

Related Questions