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 Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Explaining how a stacking context happens

An element that is positioned (non-static) and receives a z-index value creates a stacking context. Please correct me in any way so when asked about what a stacking context was in an interview I would give a feasible answer:

Within a stacking context, the layer upon an element lays by default experiences a change of position in the stacking order it finds itself relative to other elements rendered in the browser. This is done by applying a integer value to the 'z-index' property to the positioned element.

1 Answer

John Shockey
John Shockey
45,061 Points
John Shockey
John Shockey
45,061 Points

"Stacking context is the three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes."

The stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Breakdown of z-index property: https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/