Free CSS Position visualizer and generator. Interactively explore static, relative, absolute, fixed, and sticky positioning. Adjust offsets and z-index with live preview, then copy CSS code instantly. | No signup Β· Runs entirely in your browser
Zero dependencies Β· Works offlineThe purple block is the target element. Red blocks are siblings. Scroll the preview area to test sticky/fixed behavior.
The CSS position property is one of the most fundamental layout properties in front-end development. It determines how an element is positioned in the document. This tool helps you visually understand the five positioning modes and generate the corresponding CSS code.
top, right, bottom, left, and z-index properties have no effect.<html> element).top/right/bottom/left value must be set.Modal / dialog centering: Use position:absolute with top:50%; left:50%; transform:translate(-50%,-50%) for perfect horizontal and vertical centering.
Sticky navigation bar: Use position:sticky; top:0 for a header that sticks to the top when scrolling. This is more natural than fixed because it participates in normal flow before the threshold is reached.
Floating action button: Use position:fixed to pin a button to the bottom-right corner of the viewport, unaffected by page scrolling.
Stacking order: Control the stacking order of non-static positioned elements using z-index. Higher values appear on top.
Creating a positioning context: Set position:relative on a parent element (without any offsets) so that children with position:absolute are positioned relative to the parent rather than the entire page.
Sticky pitfall: A sticky element is constrained within its parent container. If the parent has overflow:hidden, sticky positioning may not work as expected.
z-index stacking: z-index only works on non-static positioned elements. Comparisons across different stacking contexts can produce unexpected results.
CSS position has five values: static (default, normal document flow), relative (offset from original position), absolute (positioned relative to nearest non-static ancestor), fixed (positioned relative to viewport), and sticky (toggles between relative and fixed based on scroll position).
position:absolute positions the element relative to its nearest non-static ancestor. If all ancestors are static, it positions relative to the initial containing block (typically the html element). This is why you typically set position:relative on the parent to create a positioning context.
position:fixed always positions relative to the browser viewport and stays fixed during scrolling. position:sticky stays in normal document flow until the user scrolls past a specified threshold (e.g. top:0), at which point it behaves like fixed. When the parent container scrolls out of view, sticky returns to normal flow. Sticky requires at least one top/right/bottom/left value.
z-index only works on non-static positioned elements (relative, absolute, fixed, sticky). Setting z-index on a static element has no effect. Higher z-index values appear on top. When z-index values are equal, later elements in the DOM cover earlier ones.
Yes. The generated code follows standard CSS syntax and can be copied directly into your stylesheet. The tool generates complete position property code based on your selected positioning mode and offset values.