Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Positioning Page Content How Z-index Works

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Z-index

HTML-----

<div class="colours">
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

CSS----

.colours div:nth-child(2){
  opacity: 0.99;
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {

  top: 20px;
  left: 20px;
  background: red;
}

.green {
   z-index: 1;
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

Mod Note - Added forum Markdown to code for clarity.

My code is this and I am trying to understand the concept of "Stacking Context" because after reading the articles mentioned in the video " What you don't know about z-index" and mozilla "Stacking Context" , I am totally confused about how Stacking Context change the Stacking Order. I learned that " by setting element opacity value less than 1" , we crete a new Stacking context. So I was trying to experiment with the code. So , what i am trying to do is " I set the z-index of second div to 1 and then I set its opacity value to 0.99 " , and I was expecting the blue color to overlap the green but it didn't happen. Green div still overlaps the blue div. Opacity doesn't work here or something else is going here. Please help me.I am totally stucked here and I want to understand this concept. Hoping for a complete explaination .

4 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

First of all, you might try to decrease the opacity value even further, to say, 0.70 so more of the background will show through. At 0.99 I'd say this is almost nontransparent.

So at the moment, the green element is the only one with a predefined stack context, and since the other elements are siblings (alongside each other in the document tree, they'll have the same stacking order.

In order for the green for overlap the others, set each of them to have their own order in the Z-Axis.

If you give Blue a z-index of 2, it will appear above the green div. And if you give Red a z-index of 3, it'll appear above the blue div. The higher the value, the further up the stacking order an element will be. :-)

By the way, check out the Markdown Basics course here on Treehouse which will fire you up with everything you need to know about including code in the Forums! :-)

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

---HTML--- <div> <span class="red">Red</span> </div> <div> <span class="green">Green</span> </div> <div> <span class="blue">Blue</span> </div> ---CSS---

.red, .green, .blue { position: absolute; width: 100px; color: white; line-height: 100px; text-align: center; }

.red { z-index: 1; top: 20px; left: 20px; background: red; }

.green { top: 60px; left: 60px; background: green; }

.blue { top: 100px; left: 100px; background: blue; }

What about this then? what happens here? I am confused by the result.Here "opacity" is given to "first div" which is of red color.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

What's happening with the CSS code you pasted in your comment is that the div elements are stacked on top of each other, one by one. It's a bit like how objects are displayed in a Desktop Application. Elements are displayed in a stacking order so they appear to be "stacked" on top of each other.

Absolute positioning demonstrates this because each of the divs are positioned relative to the browser viewport.

So right now, the Red div shows up on top because that has bigger priority... it appears first in the stacking order.

If I was to remove the z-index property and put it in the blue div. Blue would show up first.

.blue {
  z-index: 1;
  top: 100px;
  left: 100px;
  background: blue;
}

But I can control the order even further by adding a z-index property to the green and red divs .

.red {

  z-index: 3;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  z-index: 2;
  top: 60px;
  left: 60px;
  background: green;
}

So with these changes in place, Red will appear at the top of the other 2 because it has the larger z-index value.

The Opacity isn't showign anything because you're applying it to the .colours parent element. To get the desired effect you should apply it to the grouped selector in your style for the colour divs since the parent element has no background colour applied.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I think this is because the blue div is the last element in the document so it appears that way in the browser. This is how the document defines the default stacking order.

One thing I am confused about is that when I try to give red a z-index of 2 it doesn't increase it's stacking order so it appears in front. I don't have an answer for that, I'm afraid!