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 trialAakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsZ-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
Treehouse Moderator 91,253 PointsFirst 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
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
Treehouse Moderator 91,253 PointsWhat'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.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsBut when i apply this ---- div:first-child { opacity: .99; } and run this code, then red was third div stacked by green which was stacked by blue. https://codepen.io/philipwalton/pen/dfCtb
Jonathan Grieve
Treehouse Moderator 91,253 PointsI 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!
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Pointshttps://philipwalton.com/articles/what-no-one-told-you-about-z-index/ I find this article very surprising and learn new things about z-index too.