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

General Discussion

Posted by Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

How to make the overlay image not shown at the top of the page, but at the place where clicked

Hi, this is my workspace: http://web-cj1770ujgg.treehouse-app.com/

If you scroll down to "0301-0307. Lightbox: image gallary" and click any one of the images, the image will always show at the top of the page. The user has to scroll up to see it. How do I show it at where it is clicked?

Thanks.

2 Answers

Samantha Smith
Samantha Smith
4,977 Points
Samantha Smith
Samantha Smith
4,977 Points

I have the same issue. And the overlay doesn't cover the whole website.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

The link to the Workspace isn't working at the moment, so it's hard to tell exactly what might be going on here, but one option you could consider would be applying positioning and specific pixel values to get the lightbox to appear precisely where you want it. How do you have it set up currently?

Erik

Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

I combine all the projects in Andrew's video together onto one page and so some modification to solve the classes conflict, play around to change the code so to get some deeper practice.

Looks like your suggestion is the last resort.