CSS Positions - What does the term 'removed from the normal flow' mean?

In the challenge, Applied Visual Design: Change an Element’s Relative Position, it says that

Changing an element’s position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.

What does this mean? Similarly, in the next challenge where they talk about absolute positioning, they say that the element is removed from the normal flow and other elements ignore it. Can anyone explain this please?

1 Like
<p>Line 1<p>
<p>Line 2<p>
<p>Line 3<p>

Without any modifications to the positioning, this will just look like

Line 1
Line 2
Line 3

That’s the normal, default flow.

If you set position: absolute on the third one, it will take it out of the normal document flow.

ie if those three lines are all the HTML that is on the page, then the third line will be moved to the top left of the browser window and over the top of the other ones. You are saying, with position: absolute, “don’t let this element sit in its normal position, ignore the order the HTML is written in and put it exactly where I say it should be in the window”.


Relative positioning is normally used in combination with absolute positioning. Say the HTML looks like this instead:

<header>
  <h1>Some Title</h1>
  <h2>Some Subtitle</h2>
</header>
<main>
  <p>Line 1<p>
  <p>Line 2<p>
  <p>Line 3<p>
</main>

If you set position: absolute on line 3, it will move to the top of the browser window, over the header. But if you set position: relative on the <main> tag as well, instead of moving to the top of the browser window, line 3 will just move to the top of <main> - instead of being positioned absolutely in the browser window, it would now be positioned absolutely relative to main. And relatively positioned elements stay in the normal document flow, so the order of header and main stays exactly the same

3 Likes

your on tag style should

<style>
  h2 {
    position: relative;
    top:15px;
    
  }
</style>
1 Like

I had issues myself comprehending the differences and similarities between relative and absolute positioning with just the provided explanations so after playing around with giving each element borders and tweaking values to see where they moved my notes from what i learned looked like this:

h1 { position: relative; //pairs with top,bottom,left,right. used when moving an element (relative to itself) without affecting the position of surrounding elements like playing with margin would do. it allows you to specify how CSS should move this element relative to its current position in the normal flow of the page.
top:50px; //an offset saying to move this element 50px away from the top of where this element would normally be
}

footer {
position: absolute //locks the element in place relative to it’s closest POSITIONED ancestor(so this pairs with a parent container that has position:relative set) if no ancestor container is positioned default is . Unlike the position:relative, this removes the element from the normal flow of the document, so surrounding items ignore it.
top:50px; //moves element to 50px from the top of nearest positioned parent container(not 50px away from top of where it would be like with position:relative)
right:50px; //moves element to 50px away from right side of parent container
}

so i guess surrounding content more or less ignores the box of the elements new location when using either absolute or relative