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
static (default)	This child element in the middle of a line.
relative	Current container	Take space but can be floating	Yes	Yes (optional)
relative	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)
fixed	[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)
absolute	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)
sticky	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).

Quick.Work

"Will code for travel"