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

Posted by Brandyn Porter
Brandyn Porter
4,222 Points

Problem with placing an opaque gradient underneath h1 and span elements.

I was messing around with making the gradient opaque and trying to place it underneath the h1 and span elements so I created a new div element to contain the span and h1 elements. I then placed the gradient a second div element and positioned the first div element over the second one. Positioning is perfect yet the text of the h1 and span element seem transparent or rather they take the colors of the gradient when I want it to sit below the text. Below is my code, without the images of course.

https://jsfiddle.net/qmk2brbe/1/

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This code is not doing what you describe. In the code, the gradient is NOT opaque (gradient-layer-image has opacity set to .25) and it is placed in front of the header, coloring everything underneath.

Remember, default layering for HTML elements is back-to-front (what occurs first in HTML is the farthest from the front).

Overriding the defaults using z-index only works for elements that are in the same positioning context. Anytime you give an element explicit positioning and a z-index, it creates a new positioning context. At that point, any elements above it in the DOM tree will be behind it in stacking order, no matter what z-index they have.

Brandyn Porter
Brandyn Porter
4,222 Points

Thanks for that insight. I need to study more about these "Positioning Contexts" from what it seems but this was a great help. Based on what you said I was able to fix the issue and create the effect I was going for. : )