CSS CSS Transitions and Transforms Transition Timing Functions and Delays Change a Transition's Speed with Timing Functions

Azzie Fuzzie
Azzie Fuzzie
4,810 Points

Position element

Hey,What does position absolute do in this case.

1 Answer

Gergely Bocz
MOD
Gergely Bocz
Treehouse Moderator 12,586 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!