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 offlineChoose Positioning Mode
Live Preview
The purple block is the target element. Red blocks are siblings. Scroll the preview area to test sticky/fixed behavior.
Settings
Preset Scenarios
CSS Code
Understanding CSS Position
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.
The Five Positioning Modes
- static (default): Elements flow normally in the document. The
top,right,bottom,left, andz-indexproperties have no effect. - relative: The element is offset from its original position in the normal flow. Other elements are not affected β the original space is preserved.
- absolute: The element is removed from the document flow and positioned relative to its nearest non-static ancestor. If no non-static ancestor exists, it positions relative to the initial containing block (usually the
<html>element). - fixed: The element is removed from the document flow and positioned relative to the browser viewport. It stays in place when the page is scrolled.
- sticky: The element stays in normal flow until scrolling reaches a specified threshold, at which point it behaves like fixed. When the parent container scrolls out of view, it returns to normal flow. At least one
top/right/bottom/leftvalue must be set.
Common Use Cases
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.
Tips and Gotchas
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.
What are the CSS position values?
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).
What does position absolute position relative to?
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.
What is the difference between sticky and fixed positioning?
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.
When does z-index work?
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.
Can I use the generated CSS code in my project?
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.