CSS Position Visualizer
Understand how top/left offsets work visually — see the normal-flow ghost box versus the actual positioned element, with guide lines.
Visualize Offset
The dashed ghost box shows the normal document-flow position. The solid box is the actual positioned element — the guide lines measure the top/left offset.
100% browser-based — no data sent to any server
normal flow
Box