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:
- Creates a decent entry point into the page by helping the user's eye "land" on the profile photo, then wander into the rest of the page. Notice how the photo is placed top the top left, which is where most users will start visually processing a page.
- Providing a friendly, humanized psychological anchor for the rest of the page. By drawing the user's attention to the profile photo first, the designer sets an effective, personal context for the rest of the page: the photo reminds you that you are learning about a person, which tends to promote interest, retention, stickiness, etc.
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.