@wendyhamel
Posted
Hi, nice solution!
The trick to the overlay and absolute positioning is that you have to position it's container. If you do not specify a container, your overlay should be positioned, it is positioned to the body, wich is the closesed positioned element. You can set it's container to display: relative.
I noticed the clock svg is not centered with the time left text.
I hope you manage to fix the problems with this guidence.
Happy coding!
Marked as helpful
@bmmar
Posted
@wendyhamel Hi - thanks so much for commenting and the feedback.
Just one quick question - you say "if you do not specify a container" - how exactly do you specify a container?
@wendyhamel
Posted
@bmmar Yeah, I can see that's not a clear explaination.
An element with position="absolute" is positioned relative to its closest positioned ancestor. If the element, (the <div class="main-image"> in your case) is not positioned the browser will look for the next. The <body> is the containing block it will be positioned to.
I hope this makes more sense, you can look at the MDN docs for more detailed explainations ans examples.
So to answer your question; you don't realy specify a container, but if you give the <div class="main-image"> a position of relative it will become the closest positioned relative.
