CSS Position Visualizer

Home/Tools/Position Visualizer

Interactively explore CSS position values — static, relative, absolute, fixed, sticky.

No sign-up neededRuns in your browserProduction-ready CSS

Position Type

Offset from its normal position. Space is still preserved in the document flow.

Offsets

20px
20px
1

Preview

parent container
item 1
.element
item 3
Generated CSS
.element {
  position: relative;
  top: 20px;
  left: 20px;
  z-index: 1;
}