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 CSS Transitions and Transforms Transition Timing Functions and Delays Change a Transition's Speed with Timing Functions

Posted by Muaaz Matwadia
.a{fill-rule:evenodd;}techdegree seal-36
Muaaz Matwadia
Full Stack JavaScript Techdegree Graduate 19,327 Points

Position element

Hey,What does position absolute do in this case.

1 Answer

Gergely Bocz
Gergely Bocz
14,244 Points
Gergely Bocz
Gergely Bocz
14,244 Points

Hi Azzie!

In the case of .photo-overlay position:absolute is used in conjunction with .photo's position:relative. This makes it, so that the element with the class of .photo-overlay is exactly on top of its parent (the one with .photo class). It works because position:absolute removes the element from the flow and because the parent has position:relative, the browser displays the child element relative to its parent. Which means exactly on top of it, if the child has a top and left and/or bottom and right offset of 0.

In the case of .btn-icon it is very much the same story.

So it isn't really position:absolute that puts our elements in their place, but the child's position:absolute in conjunction with the parent's position:relative. This is a good trick to know if you want to position elements inside other elements.

You can find out more about this trick on https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Hope i could be of help to you!

Best of luck!