CSS Position: What Is Document Normal Flow?

CSS Position
Web applications are always growing, and users expect so much

information on a single page with less click or scroll.
Placing/Positioning HTML elements at correct places are the key to
hold so many controls on a single page. CSS position is one of the
key topics in CSS which helps to understand how to place HTML
elements at various locations on a page.
What is document normal flow?

Rendering elements normally one after another is considered as
normal flow. Each normal flow element position affects or affected
by other normal flow elements.
HTML Element categories.

Two types of HTML elements categories are there. One is Block
level elements(ex: <div></div>,<p></p>) and another one is Inline
elements(<span></span>, <img />). Every block level element starts
a new line and occupies full width and Inline elements only occupy
required space. Position properties can be applied to both
category elements.
There are five types of CSS position properties are there.
1 Static position
This is the default CSS position applicable to all HTML elements.
This position place the HTML elements based on normal document
flow. Using this position, top/right/bottom/left properties can
not be applicable to elements (ie., static position elements don’t
obey top/right/bottom/left properties).
Note: Page scrolling does affect this position.
.p1 {
width:50px;
height:50px;
background-color:cornflowerblue;
position:static;
}
.p2 {
width:50px;
height:50px;
background-color:sandybrown;
}
<body>
<div class="p1">
</div>
<div class="p2">
</div>
</body>
2 Relative position
This position places the element relative to its normal position.
This position is relative to normal document flow. Here
top/right/bottom/left properties can be applied to elements.
Note:
• Page scrolling does affect this position.

• If position only applied without top/right/bottom/left
properties, it will act like Static position.
.p1 {
width:50px;
height:50px;
}
.p2 {
width:50px;
height:50px;
background-color:lightgreen;
position:relative;
left:60px;
top:20px;
}
<body>
<div class="p1">
</div>
<div class="p2">
</div>
</body>
3 Absolute position
This position places the element at the exact position specified.
This position is relative to
• its parent element position when parent element position is
relative/absolute.
• document body (browser viewport) when parent element position
is static.
• document body (browser viewport) when there is no parent
element.
Note:
• Page scrolling does affect this position.

• This position element is completely removed from normal
document flow.
.p1 {
width:50px;
height:50px;
background-color:cornflowerblue;
}
.p2 {
width:50px;
height:50px;
}
.p3 {
width:50px;
height:50px;
position:absolute;
left:60px;
top:20px;
}
<body>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
</body>
4 Fixed position
This position places the element at a fixed place relative to the
viewport. Page scrolling does not affect this position.
Note: This position element is completely removed from normal
document flow.
.p1 {
width:50px;
height:50px;
position:fixed;
left:40px;
top:40px;
}
<body>
<div class="p1">
</div>
</body>
5 Sticky position
Sticky position is a combination of relative and fixed. It is
relative until it crosses a specified threshold, at which point it
is treated as static position.
Many browsers don’t support Sticky position partially/fully.
Following image (from https://caniuse.com/#feat=css-sticky) shows
Sticky position supporting browsers and its versions.
Note: This position element is completely removed from normal
document flow.
6 Difference between Relative position and Absolute CSS

position (Relative vs Absolute position)
• Relative position places the element relative to its normal
position and Absolute position places the element at the exact
position specified.
• Relative position elements are placed based on normal document
flow, but Absolute position elements are completely removed
from normal document flow and place at the exact position.
• Absolute position elements are placed based on either parent
element position when parent element position is
relative/absolute OR document body (browser viewport).
.p1 {
width:50px;
height:50px;
position:relative;
left:50px;
top:50px;
}
.p2 {
width:50px;
height:50px;
position:absolute;
right:50px;
top:50px;
}
<body>
<div class="p1">
</div>
<br/>
<div class="p1">
</div>
<br />
<div class="p1">
</div>
<div class="p2">
</div>
<br />
<div class="p2">
</div>
<br />
<div class="p2">
</div>
</body>
Above example code output is given below.
7 Difference between Static position and Relative CSS

position (Static position vs Relative position)
• Left/right/top/bottom properties are not applicable to static
position elements but applicable to Relative position
elements.
• Static position is a default position.
8 Static and Relative position similarities

• Relative position works like Static when left/right/top/bottom
properties are not applied.
• Relative and Static position elements are placed based on
normal document flow.
9 Difference between Static and Absolute CSS position
(Static vs Absolute position)
• Static position is a default position.
• Static position elements are placed based on normal document
flow, but Absolute position elements are completely removed
from normal document flow and place at exact position.
• Left/right/top/bottom properties are not applicable to Static
position elements but applicable to Absolute position
elements.
10 Difference between Fixed and Absolute CSS position

(Fixed vs Absolute position)
• Absolute position places the element at the exact position
specified. This position element scrolls with the HTML page.
• Fixed position works like Absolute position, but it is
relative to view port. This position element doesn’t scroll
with the HTML page.
Following different situations explains how CSS position

works with parent and child elements when parent and
child CSS positions are different.
Note: Irrespective of parent element position, if child element
position is Static, Left/right/top/bottom properties are not
applicable to child element.
11Static positioning inside default positioning

• Parent element position: No parent element. [In this case
document body (browser viewport) is considered as parent
element.]
• Child element position: static
Result:
• Child element is placed based on normal document flow.

• Left/right/top/bottom properties are not applicable child
elements.
12 Static positioning inside Static positioning
• Parent element position:Static
• Child element position:Static
Result:
• Child element position is relative to the parent element

position.
• Parent and child elements starting position(x,y) is same.
• Left/right/top/bottom properties are not applicable to parent
and child elements.
• Both elements positions scroll with the HTML page.
13 Relative positioning inside Static positioning

• Child element position:Relative
Result:
• Child element is relative to its normal position which is

inside the parent element.
• Left/right/top/bottom properties are not applicable to parent
element.
• Left/right/top/bottom properties are applicable to child
element and those works relative to its normal position which
is inside the parent element.
.parent {
width:150px;
height:150px;
position:static;
}
.child {
width:50px;
height:50px;
position:relative;
left:160px;
top:50px;
}
<body>
<div class="parent">
</div>
<br/>
<div class="child">
</div>
</div>
</body>
14 Absolute positioning inside Static positioning

• Child element position: Absolute
Result:
• Child element is not relative to parent element. Child element

works based on document body (browser viewport).
• Child element is completely removed from the normal document
flow.
15 Fixed positioning inside Static positioning

• Child element position: Fixed
Result:
• Child element is not relative to parent element.

• This position places the element at fixed place relative to
the viewport(not Static parent element).
flow.
• Child element position is not scroll with the HTML page.
• Parent element position is scroll with the HTML page.
16 Relative positioning inside default positioning

• Parent element position:No parent [Note: In this case document
body (browser viewport) is considered as parent element.]
Result:
• Child element position is relative to normal flow.
element.
• Child element position is scroll with the HTML page.
17 Static positioning inside Relative positioning

• Parent element position:Relative
• Child element position: Static
Result:
• Child elements is relative to the parent element.

• Left/right/top/bottom properties are applicable to parent
element only not child element.
• Both elements positions are scroll with the HTML page.
.parent {
width:150px;
height:150px;
position:relative;
left:50px;
top:60px;
}
.child {
width:50px;
height:50px;
position:static;
}
<body>
<div class="child">
</div>
</div>
</body>
18 Relative positioning inside Relative positioning

Result:
• Child element is relative to its parent elements.

• Left/right/top/bottom properties are applicable to parent and
child element.
19 Absolute positioning inside Relative positioning

• Child element position:Absolute
Result:
• Here child element is absolutely placed relative to the parent

element position.
• Child element Left/right/top/bottom properties works relative
to the parent element position only.
flow.
20 Fixed positioning inside Relative positioning
• Child element position:Fixed
Result:
• Child element is placed at fixed place relative to the

viewport not relative to the parent element.
• Left/right/top/bottom properties are applicable to the parent
and child elements.
flow.
• Child element is not scroll with the HTML page.
• Parent element is scroll with the HTML page.
21 Absolute positioning inside default positioning

• Parent element position: No parent [Note: In this case
document body (browser viewport) is considered as parent
element.]
Result:
• Here child element is absolutely placed relative to the
viewport.
element.
• Child element position is scroll with the HTML page.
flow.
22 Static positioning inside Absolute positioning

• Parent element position: Absolute
• Child element position: Static
Result:
• Child element is placed relative to the parent element.

• Left/right/top/bottom properties are not applicable to child
element.
• Parent and child elements positions are scroll with the HTML
page.

• Parent element position:Absolute
Result:
• Child element is placed relative to its normal position based
on parent element.
child elements.
page.
.parent {
width:150px;
height:150px;
position:absolute;
left:160px;
top:50px;
}
.child {
width:50px;
height:50px;
position:relative;
left:25px;
top:30px;
}
<body>
<div class="child">
</div>
</div>
</body>

Result:
• Child element is absolutely placed and relative to the parent
element(Child element positioned based on parent element
position).
child elements.
page.
25 Fixed positioning inside Absolute positioning

Result:

viewport not relative to the parent element.
• Left/right/top/bottom properties are applicable to the parent
and child elements.
flow.
• Parent element is scroll with the HTML page.
26 Fixed positioning inside default positioning
• Parent element position:No parent [Note: In this case document
body (browser viewport) is considered as parent element.]
Result:

viewport.
element.
flow.
27 Static positioning inside Fixed positioning

• Parent element position:Fixed
• Child element position:Static
Result:
• Child element is relative to the parent element and placed on

normal flow (1st child element and parent element X & Y
positions are same).
• Left/right/top/bottom properties are applicable to parent
element only.
• Parent and child elements are not scroll with the HTML page.
28 Relative positioning inside Fixed positioning
Result:
• Child element is relative to the parent element.

• Child element is placed relative to its normal position based
on parent element.
child elements.
• Parent element is not scroll with the HTML page. Because of
the parent element, child element is also not scroll with the
HTML page.
29 Absolute positioning inside Fixed positioning

Result:
• Child element is absolutely placed and relative to the parent

element position.
• Left/right/top/bottom properties are applicable to child and
child elements.
• Parent element is not scroll with the HTML page. Because of
the parent element child element is also not scroll with the
HTML page.
30 Fixed positioning inside Fixed positioning
Result:
• Child element is placed at fixed place relative to the parent

element not relative to the viewport.
child elements.
• Parent and child elements are not scroll with the HTML page.
Following are the related CSS position properties.

Top, right, bottom, left, float, height, width, overflow, clear,
z-index and clearfix technique.

CSS Position: What Is Document Normal Flow?

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Position: What Is Document Normal Flow?

Uploaded by

Copyright:

Available Formats

CSS Position

Web applications are always growing, and users expect so much

What is document normal flow?

HTML Element categories.

• Page scrolling does affect this position.

• Page scrolling does affect this position.

6 Difference between Relative position and Absolute CSS

Above example code output is given below.

7 Difference between Static position and Relative CSS

8 Static and Relative position similarities

10 Difference between Fixed and Absolute CSS position

Following different situations explains how CSS position

11Static positioning inside default positioning

• Child element is placed based on normal document flow.

• Child element position is relative to the parent element

13 Relative positioning inside Static positioning

• Child element is relative to its normal position which is

14 Absolute positioning inside Static positioning

• Child element is not relative to parent element. Child element

15 Fixed positioning inside Static positioning

• Child element is not relative to parent element.

16 Relative positioning inside default positioning

17 Static positioning inside Relative positioning

• Child elements is relative to the parent element.

18 Relative positioning inside Relative positioning

• Child element is relative to its parent elements.

19 Absolute positioning inside Relative positioning

• Here child element is absolutely placed relative to the parent

• Child element is placed at fixed place relative to the

21 Absolute positioning inside default positioning

22 Static positioning inside Absolute positioning

• Child element is placed relative to the parent element.

23 Absolute positioning inside Relative positioning

24 Absolute positioning inside Relative positioning

25 Fixed positioning inside Absolute positioning

• Child element is placed at fixed place relative to the

• Child element is placed at fixed place relative to the

27 Static positioning inside Fixed positioning

• Child element is relative to the parent element and placed on

• Child element is relative to the parent element.

29 Absolute positioning inside Fixed positioning

• Child element is absolutely placed and relative to the parent

• Child element is placed at fixed place relative to the parent

Following are the related CSS position properties.

You might also like