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

**URL:** <https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [August 15, 2018, 12:25pm UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023 "2018-08-15T12:25:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alinaalam](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alinaalam/32/96062_2.png) [@alinaalam](https://forum.freecodecamp.org/u/alinaalam)\
**Post date:** [August 15, 2018, 12:25pm UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023/1 "2018-08-15T12:25:38Z")

</div>

In the challenge, **[Applied Visual Design: Change an Element’s Relative Position](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/change-an-elements-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?

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [August 15, 2018, 12:33pm UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023/2 "2018-08-15T12:33:00Z")

</div>

```auto
<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:

```auto
<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

---

<div class="post-metadata">

**Author:** ![kodingku](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kodingku/32/97186_2.png) [@kodingku](https://forum.freecodecamp.org/u/kodingku)\
**Post date:** [August 15, 2018, 12:57pm UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023/3 "2018-08-15T12:57:13Z")

</div>

your on tag style should

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

```

---

<div class="post-metadata">

**Author:** ![number1code](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/number1code/32/96391_2.png) [@number1code](https://forum.freecodecamp.org/u/number1code)\
**Post date:** [April 15, 2019, 6:07pm UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023/4 "2019-04-15T18:07:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 10:52am UTC](https://forum.freecodecamp.org/t/css-positions-what-does-the-term-removed-from-the-normal-flow-mean/218023/5 "2021-03-09T10:52:49Z")

</div>