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

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

#1

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?


#2
<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

your on tag style should

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