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

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Amber Lim
Amber Lim
4,707 Points
Posted by Amber Lim
Amber Lim
4,707 Points

Why do I need to set absolute positioning for full-screen overlay?

The overlay appeared when I include absolute positioning. Is there a reason why it didn't appear without absolute positioning, even though the width and height are set to 100%. Shouldn't the overlay div show when its width & height is 100%?

Correct my logic if I'm wrong, which apparently I am. Thank you.

Here's what worked:

#overlay {
  background-color: rgba(0,0,0, .7);
  height: 100%;
  width: 100%;
  position: absolute; 
  top: 0;
  left: 0;
};

Here's what didn't:

#overlay {
  background-color: rgba(0,0,0, .7);
  height: 100%;
  width: 100%;
};

2 Answers

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

Because without absolute positioning, even if you set the height and width to 100%, the element's default behavior is to appear in the normal flow of the document. So by setting its position to absolute and giving it a starting point of top 0 and left 0, you are removing the element from the normal flow and setting its precise location.

Amber Lim
Amber Lim
4,707 Points
Amber Lim
Amber Lim
4,707 Points

Thanks x100 Timothy. Makes full sense now. My logic never fails to fail me.

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

Thanks