CSS Positioning Playground
Fast, accurate and free online piaskownica pozycjonowania css tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Sandbox settings
/* Container */
.demo-container {
width: 560px;
height: 320px;
border: 1px dashed #999;
position: relative;
}
/* Positioned element */
.demo-box {
width: 140px;
height: 80px;
position: absolute;
top: 40px;
left: 48px;
z-index: 10;
}
Rate this tool:
Related tools
Other tools you may find usefulCSS Positioning Sandbox - Master page layout
Want to understand how the static, relative, absolute, fixed, and sticky position properties work in stylesheets? Our interactive CSS positioning sandbox is a modern and extremely intuitive tool for experimenting with the layout of HTML elements live, which will allow you to quickly and error-free master the advanced CSS code positioning rules.
Understanding the basics of positioning in CSS and the default document flow (normal flow)
Every element on a website participates in the so-called normal document flow by default. The default value of the position property is responsible for this: static. In this mode, the browser arranges elements one by one according to the order they appear in the HTML file. Block elements are arranged vertically, while linear elements are arranged horizontally. It is worth knowing that for static elements, properties such as top, bottom, left, right and z-index have no effect on their position. Understanding this fact is the starting point for learning more advanced positioning techniques that allow you to break away from this natural layout and create dynamic layouts tailored to mobile devices.
A common problem for beginner web designers is trying to move a static element using coordinates and failing. Only changing the value of the position property to something other than static opens the way to manipulating the position of the element. Our CSS positioning sandbox was created so that you can directly observe these differences and see for yourself how changing one parameter modifies the behavior of the entire website layout.
Comparison of relative and absolute positioning
Relative positioning (position: relative) acts as a reference point for yourself and for your children. When you set an element to be relative, you can move it using an offset property (e.g. top or left), and this offset will be counted from its original, natural position in the document flow. What is extremely important, the space that this element originally occupied remains empty and no neighboring elements move to its place. In practice, position: relative is most often used as a container for absolutely positioned elements.
On the other hand, absolute positioning (position: absolute) completely removes an element from the normal flow of the document. This element no longer takes up space on the page, and adjacent elements behave as if they did not exist at all. The position of an absolute element is relative to its nearest positioned ancestor (that is, one that has its position property set to relative, absolute, fixed, or sticky). If none of the ancestors are positioned, the element is positioned relative to the browser window. With our sandbox, you can easily check this relationship by adding parent and child elements and manipulating their positioning values in real time.
Modern fixed and sticky positioning in user interface design
Fixed positioning (position: fixed) also removes an element from the normal document flow, but always positions it directly relative to the browser window (viewport). This means that an element with this property remains in the same place on the screen even as you scroll down the web page. This is an ideal solution for creating sticky headers, return to top buttons or chat pop-ups. It is worth remembering that fixed positioning may sometimes cover other content on the website, so it requires precise planning of margins and layout.
The most flexible and modern solution is sticky positioning. It is a hybrid of relative and fixed positioning. An element with the position: sticky property behaves as a relative element until a certain scroll threshold is reached (defined as top: 0, for example), at which point it becomes a fixed element and sticks to the edge of the screen. However, unlike position: fixed, a sticky element remains inside its parent container and scrolls with it when the parent container leaves the screen. This is a great tool for creating tables of contents or side navigation panels that should follow the user only within a given article.
Using z-index and layer management in CSS positioning
When working with positioned elements, you will quickly encounter the problem of overlapping different elements. The z-index property is used to manage the order in which layers are displayed on the Z axis (i.e. screen depth). It only works on elements that have amphibians set to a position other than static. The z-index value can be a positive, negative, or zero number. Items with a higher value will be displayed above items with a lower value.
However, it is worth remembering the concept of stacking context. This context is created by certain properties of parent elements, which can cause a high z-index element inside one container to appear under a low z-index element in another context anyway. The CSS positioning sandbox allows you to seamlessly test these behaviors, helping you avoid frustrating errors with invisible or incorrectly overlapping elements on the page.
Frequently asked questions
What is the difference between position: relative and position: absolute?
Position: relative positions the element relative to its original position, leaving a blank space in the document flow. Position: absolute completely removes the element from the flow and positions it relative to its nearest positioned parent.
Why does an element with position: absolute go beyond its parent?
This happens if the parent container does not have a position property defined with a value other than static (e.g. relative). Then the absolute element looks for the next positioned ancestor up to the html element.
How does fixed positioning work and when to use it?
Position: fixed positions the element relative to the browser window (viewport). The item remains in the same place on the screen as you scroll. They are used for permanent menus, headers or chat widgets.
What are the characteristics of position: sticky?
This is a combination of relative and fixed. The element behaves normally until it reaches a certain scroll limit, at which point it sticks to the screen but remains within its parent.
What is the default way to position elements in HTML?
The default positioning type is static. Elements are then arranged in the natural flow of the document and the top, left, right, bottom and z-index properties have no effect on them.