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 Techniques Positioning Schemes Relative Positioning

Matt Varner
Matt Varner
5,373 Points
Posted by Matt Varner
Matt Varner
5,373 Points

Why do elements appear to layer over other elements outside of the context of z-index use?

Step right up, folks, and get your free forum points here. Easy softball question, I'm sure. You there, how about you?

Yes, you.

Maybe I'm just daft, but when Guil uses the offset parameters to show how the logo will shift from its original position in the normal document flow, it appears to tuck under the navbar.

Faux Layering

Is this behavior normal? That is, is it just that the "last sibling element" in any shared parent container literally listed last appears "on top" of all elements appearing earlier in the markup?

I'm just sort of curious, although I'm not sure why anyone would fixate on this (but me), if you could use this behavior as 'faux layering.'

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

When elements are stacked without z-index specified they default behaviour to the following:

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance in HTML markup.
  3. Descendant positioned elements, in order of appearance in HTML markup.

Hope this helps :)

Example:

HTML:

<html>
  <body>
    <div id="bluebox1">bluebox1</div>
    <div id="redbox1">redbox1</div>    
    <div id="redbox2">redbox2</div>
    <div id="bluebox2">bluebox2</div>
  </body>
</html>

CSS:

#bluebox1{
  height: 100px;
  width: 200px;
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
}

#bluebox2{
  height: 100px;
  width: 200px;
  background-color: blue;
  position: absolute;
  top: 200px;
  left: 0px;
}

#redbox1{
  height: 100px;
  width: 100px; 
  background-color: red;
  position: absolute;
  top: 250px;
  left: 0px;
}

#redbox2{
  height: 100px;
  width: 100px; 
  background-color: red;
  position: absolute;
  top: 50px;
  left: 0px;
}

You will find that in the first instance redbox1 overlaps bluebox1 but redbox2 underlaps bluebox2 due to the appearance hiearachy in the HTML markup.

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

When elements are stacked without z-index specified they default behaviour to the following:

  1. Background and borders of the root element
  2. Descendant blocks in the normal flow, in order of appearance in HTML markup.
  3. Descendant positioned elements, in order of appearance in HTML markup.

Hope this helps :)

Example:

HTML:

<html>
  <body>
    <div id="bluebox1">bluebox1</div>
    <div id="redbox1">redbox1</div>    
    <div id="redbox2">redbox2</div>
    <div id="bluebox2">bluebox2</div>
  </body>
</html>

CSS:

#bluebox1{
  height: 100px;
  width: 200px;
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
}

#bluebox2{
  height: 100px;
  width: 200px;
  background-color: blue;
  position: absolute;
  top: 200px;
  left: 0px;
}

#redbox1{
  height: 100px;
  width: 100px; 
  background-color: red;
  position: absolute;
  top: 250px;
  left: 0px;
}

#redbox2{
  height: 100px;
  width: 100px; 
  background-color: red;
  position: absolute;
  top: 50px;
  left: 0px;
}

You will find that in the first instance redbox1 overlaps bluebox1 but redbox2 underlaps bluebox2 due to the appearance hiearachy in the HTML markup.

Matt Varner
Matt Varner
5,373 Points
Matt Varner
Matt Varner
5,373 Points

Thanks, Ashley. That clears it up nicely.

I was just about to write up my own answer, having run across this article on the subject. And then, I delved into the mucky-muck of the detailed W3C spec definition for stacking contexts.

Interesting stuff.