Gergely BoczTreehouse Moderator 12,586 Points
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!