Passion & Opportunity ? continue : break

How to use CSS position in HTML?
Written: 2019-01-14 22:25:54 Last update: 2019-06-19 15:30:32

TL;DR; as a web UI developer (front-end), we often use 'position' value, this simple demo page is just a cheatsheet for self reminder, any element or 'pseudo' element (:before and :after) is considered as "positioned" ONLY IF it has 'position' attribute with a value either one of 'relative' or 'fixed' or 'absolute' or 'sticky'.

Please use large screen (desktop or table) to best see the demo of actual effect for each 'position' values.



Position Parent (container) Space area Follow screen scroll Effected by 'location' attribute

top / left / bottom / right
static
(default)
Current container Take space Yes No
This child element
in the middle
of a line.
relative Current container Take space but can be floating Yes Yes (optional)
This element is positioned relative to left: 20px
This element is positioned relative to left: 40px
This element is positioned relative to left: 60px


This line has an inline element with relative positioned
left: 50px
in the middle of a line, it will be overlapped.

This element is positioned relative (right: 30px), in current flow the result is similar to 'margin-right: -30px'

newline
newline
the relative positioned element should be on the right but it is go up
Element is positioned relative (bottom: 15px; right 30px;)
fixed Viewport (screen) Take no space and floating No Yes (mandatory)
[see the demo floating on right middle screen]
position: fixed
(floating on screen)
top: 50%; right: 0;
absolute Nearest "positioned" parent element
* IF there is no "positioned" parent then not visible
Floating Yes Yes (optional)
this is a parent element which is relatively positioned, see the absolute positioned children on the bottom right corner.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
absolute positioned, 'right: 5px; bottom: 1.0em; z-index: 2'
absolute positioned, 'right: 15px; bottom: 2.1em; z-index: 3'
absolute positioned, 'right: 25px; bottom: 3.2em; z-index: 1'
sticky Current container Switching behaviour like a 'relative' or a 'fixed' positioned.
In 'relative' mode:
  • If does not have any 'location' attribute
  • If does not meet any of the specified 'location' attribute
  • Behaviour: take space and follow container scrolling

In 'fixed' mode:
  • If at least has 1 'location' attribute
  • If fulfilled at least 1 of the specified 'location' attribute
  • Behaviour: take space but floating and static (does not follow scroll).

NOTES:
  • No support for IE / EDGE 15 or below
  • Safari needs additional setup:
    • Element needs additional 'position: -webkit-sticky; position: sticky'
    • Immediate parent should not have 'overflow' nor 'overflow-y' property, otherwise may need to add wrapper dummy parent
  • To test demo please use the mouse to scroll inside the small window below.
Yes (optional)
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
position: sticky; top: 15px
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
- the end -

With 'position' property, we can put any element anywhere on screen therefore child elements can go outside parent container.

If any elements' position are overlapped then 'z-index' attribute will play in effect, the bigger the value then the element will be on top (visible).

Tested under Chrome version 71.0.3578.98, Firefox version 64.0.2, Safari version 12.0.2 (14606.3.4).