Why is it that every social application has the user's avatar fully or partially overlapping the user's banner/cover image? The same thing happens with pages also.
It's intentional, grid-breaking design
Grid-breaking is a common design technique used to draw attention to important objects on a page. By intentionally misaligning visual content to the page's natural grid lines, a designer can draw attention to a key piece of content on a page because the user's eye will naturally be drawn to that content.
The following example uses grid-breaking shape (round), placement (right margin overlap), rotation (tilted text), depth (drop shadow) and bold color (red) to draw a user's eye to the red circle on the page:
Why use grid-breaking on a profile page?
Because profile pages contain a lot of information (name, birthday, avatar, about, friends, photos, albums, feed, etc), so the amount of information can feel overwhelming to a user. By using grid-breaking to draw a user's eye first to the person's profile picture, the designer:
The overlapping is there to show the hierarchy between the two photos. The profile image is the more important one and the cover is an additional info that you can show to the user.
Think of an example where those 2 photos were ordered differently, for example the cover photo first and beneath it the profile image.
Your eyes will look first at the bigger image and then at the smaller one that is beneath.