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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Howie Yeo
PLUS
Howie Yeo
Courses Plus Student 3,639 Points
Posted by Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

How CSS position: absolute, brings the overlay element to the front?

Hi,

I am not sure i understand how CSS brings the element to the front? 

#overlay {
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

3 Answers

romankozak2
romankozak2
5,782 Points
romankozak2
romankozak2
5,782 Points

In my understanding, position: absolute only allows you to position the element exactly where you want it placed. Hence, Dave putting in the properies "top" and "left" with a value of 0 in order to position the overlay exactly how he wants it (to the edge of the screen). The <div> is appended to the body at the very end of the body using jQuery, as he explains. Being that the body is the parent element for most everything on the page, it is sure to cover the whole screen using the 100% width and 100% height (and the relative position described previously).

So the position absolute by itself isn't the property by which he brings the overlay to the front. He does that by appending it to the body using the .append() method, and creating CSS properties for the overlay with height, width and positioning.

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

What position absolute does is positions the selected element absolute through the entire area of it's parent element, which is most commonly the root element; in other words the width of the browser screen. So it brings it to the top of the element stack.

To change this you can apply a z-index property to take it behind other elements on the screen.

#overlay {
  z-index: -100;

}

Hope i understood you right :)

Oskar Radon-Kimball
Oskar Radon-Kimball
8,142 Points
Oskar Radon-Kimball
Oskar Radon-Kimball
8,142 Points

Do you mean to ask why the overlay is displayed on top of the existing site we were given? If so, CSS stands for Cascading Style Sheets which means that each line of code writes over each bit of code before it, so this overlay we have created is displayed over the existing code until we add the display: none; part which makes it so the overlay isn't shown until we enable it using some jQuery code.