CSS Layout - The position Property


position attribute specifies the positioning type of the element.

Five values of the position attribute:

Elements can be positioned using the top, bottom, left and right attributes. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

position: static;

The default value of the HTML element, which is not positioned, follows normal document flow objects.

Statically positioned elements are not affected by top, bottom, left, right.

div.static { position: static; border: 3px solid #73AD21; }

Here is the CSS that is used:


div.static { position: static; border: 3px solid #73AD21; }
Try it yourself »

position: relative;

Relative positioning of elements is relative to their normal position.

Move the relative positioning element, but the space it originally occupied does not change.
This <div> component has position: relative;

Here is the CSS that is used:


h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
Try it yourself »

position: fixed;

The position of the

element is fixed relative to the browser window.

It will not move even if the window is scrolling:


p.pos_fixed { position:fixed; top:30px; right:5px; }
Try it yourself »
This <div> component has position: fixed;

Note: Fixed positioning needs to be described under IE7 and IE8 to support! DOCTYPE.

Fixed positioning makes the element's position independent of the document flow, so it doesn't take up space.

Fixed elements overlap with other elements.

position: absolute;

The position of an absolutely positioned element is relative to the nearest positioned parent element, and if the element has no positioned parent element, its position is relative to <html>

This <div> component has position: relative;
h2 { position:absolute; left:100px; top:150px; }

absolute positioning makes the element's position independent of the document flow and therefore does not take up space.

absolute positioned element overlaps other elements.

Here is the CSS that is used:

sticky positioning

sticky English literally means sticky, paste, so you can call it sticky positioning.

position: sticky; Position based on the user's scroll position.

The element for sticky positioning is user-dependent scrolling, switching between position: relative and position: fixed positioning.

It behaves like position: relative; When the page scrolls beyond the target area, it behaves like position: fixed; , it will be fixed at the target position.

Element positioning is relative positioning before crossing a certain threshold, and fixed positioning after that.

This specific threshold refers to one of top, right, bottom, or left. In other words, specifying one of the four thresholds of top, right, bottom, or left can make sticky positioning effective. Otherwise, its behavior is the same as relative positioning.

Note: Internet Explorer, Edge 15 and earlier IE versions do not support sticky positioning. Safari requires -webkit- prefix (see example below).


div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
Try it yourself »