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 Henrique Machuca
Henrique Machuca
5,611 Points

Problem with Overlay

I am going through the Jquery course. In the lightbox class, we create an overlay to show up over the screen at the click event of the mouse.

The position is set to absolute in the course (top and left to 0), but in my website, my gallery is downwards the page, you have to scroll down, and the overlay is display on the top part. It covers the screen, but when I scroll down the overlay stays in the top portion of it.

How do I fix this?! And please don´t say position:fixed cause it has its problem since it does not move with scrolling, and might be bad if it displays a large image.

ps. the overlay is appended to the body element just like in the video.

Thank you!!

#overlay {
    background: rgba(0,0,0,.85);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}
Colin Marshall
Colin Marshall
32,861 Points

Just to make sure I understand, you want the overlay to act like it does when position is fixed, except the overlay should scroll like everything else?

3 Answers

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

Yes Colin!

I´m having a really hard time setting this up cause:

  • using an absolute positioning, the overlay background does not darkens the whole screen, just partially;

  • using a fixed positioning fixes the problem above, however, if I have a big picture in height for example, it crops the end of the image, and I can´t scroll to look at it;

Really can´t solve this one out!

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

The Bootstrap modals are able to do what you want. You could either use a custom form of bootstrap that includes just the modal dialog stuff, or you could look at the source code and try to replicate it.

Matthias Nörr
Matthias Nörr
8,614 Points
Matthias Nörr
Matthias Nörr
8,614 Points

Setting the position to fixed solved this problem for me. Thank you!