Why is there a space between elements when one element is relatively positioned?

Question

The circular image is of position: relative and has been moved up using the bottom: 90px property. Image of current situation:

The CSS for the two <h1> tags below are also provided. Is this some caveat of the relative positioning property?

It's acting as if its boundaries are where the position is without the relative position change.

This is what it looks like without the relative re-positioning:

What gives?

CSS: (header is the wrapper, paper-title is the bigger h1, name is the text (h4), and picture is the circular picture.)

I'm trying to place the headers right below the image borders without having to make them position relative.

 .content-header { //height: 200px; width: inherit; text-align: center; background-color: #547980; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom: solid #9DE0AD 4px; } .content-picture { display: inline-block; border-radius: 100%; height: 150px; width: 150px; position: relative; bottom: 80px; border: 8px solid white; } .Paper-Title { font-size: 5vw; text-align: center; padding-top: 10px; margin: 0px; padding: 20px 20px 0px 20px; color: #9DE0AD; } .Name { text-align: center; font-size: 2.7vw; margin: 0px; width: 100%; padding: 10px 0px 20px 0px; color: #9DE0AD; font-weight: lighter; } 

Answer 1

Your suspicion is correct. With relative positioning the original space occupied by the element is reserved. So even when you offset the element with top , bottom , left or right , although it shifts accordingly, its original space is still respected by other elements.

More details:

• Why are horizontal scroll bars shown on my website?
• Why is there blank space to the right of my website?