CSS Positioning

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!


  • position: static|absolute|fixed|relative|sticky|initial|inherit|unset;
  • z-index: auto|number|initial|inherit;


staticDefault value. Elements render in order, as they appear in the document flow. The top, right, bottom, left and z-index properties do not apply.
relativeThe element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's LEFT position
fixedThe element is positioned relative to the browser window
absoluteThe element is positioned relative to its first positioned (not static) ancestor element
initialSets this property to its default value.
inheritInherits this property from its parent element.
stickyExperimental feature. It behaves like position: static within its parent until a given offset threshold is reached, then it acts as position: fixed.
unsetCombination of initial and inherit. More info here.


Normal Flow is the flow of elements if the position of element is static.

  1. defining width is beneficial because in some cases it prevents overlapping of element's content.

Got any CSS Question?