The CSS position property | Definition & Usage, Syntax, Types of Positioning | List of All CSS Position Properties

In this tutorial, we will be learning completely about the CSS Position Property and its syntax along with some examples. These details will help you a lot to understand the concept of position property in CSS.

What is the CSS position property?
Syntax
Property Values
Types of Positioning in CSS
Static
Absolute
Relative
Fixed
Sticky
All CSS Position Properties

What is the CSS position property?

The CSS position property determines the position of an element in a document. This property runs with the left, right, top, bottom, and z-index properties to define the final position of an element on a page.

Syntax:

position: static|absolute|fixed|relative|sticky|initial|inherit;

The position property can help us to manipulate the location of an element, for example:

.element {
  position: relative;
  top: 20px;
}

Relative to its original position the element above will now be nudged down from the top by 20px.

relative is only one of six values for thepositionproperty. Other values are:

Property Values

static: every element has a static position by default, so the element will stick to the normal page flow.
relative: an element’s original position remains in the flow of the document, just like thestaticvalue.
absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
fixed: the element is removed from the flow of the document like absolutely positioned elements.
sticky (experimental): the element is treated as a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
inherit: the position value doesn’t cascade, so this can be used to specifically force it to, andinheritthe positioning value from its parent.

Types of Positioning in CSS

A positioned element is an element whose computed position value is eitherrelative, absolute, fixed, or sticky. The default one isstatic, let’s see about it first.

Static

This is a by default position for HTML elements. It constantly positions an element as pert the normal flow of the page. It is not affected by the top, bottom, left, and right properties. Let’s use an example to show thatposition: statichas no effect on the position of an element.

<html>
    <body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Now, we will addposition: staticto the div with the class main-element and left, top values to it.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Result:

Absolute

If a child element has an absolute value then the parent element will behave as if the child isn’t there at all:

.element {
  position: absolute;
}

And when we try to set other values such as left, bottom, and right we’ll find that the child element is responding not to the dimensions of its parent, but the document:

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Relative

We can use position relative to make the child element positioned absolutely from its parent element we need to set this on the parent element itself:

.parent {
  position: relative;
}

Now properties such as left, right, bottom and top will refer to the parent element, so that if we make the child element transparent we can see it sitting right at the bottom of the parent:

Fixed

It is very similar to absolute as it can help us to position an element anywhere relative to the document.

But this value is unaffected by scrolling.

Example:

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
  border: 1px solid #81adc8;
} 

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

html {
    height: 800px;
}

Sticky

This one is introduced recently and the browser support for this is very poor.

The one case where this property is very useful is Navbar where the navbar will appear to the top even after we scroll to the bottom of the page.

#one { position: sticky; top: 10px; }

All CSS Position Properties

No.	Property	Description	Values
1)	bottom	It is used to set the bottom margin edge for a positioned box.	auto, length, %, inherit
2)	clip	It is used to clip an absolutely positioned element.	shape, auto, inherit
3)	cursor	It is used to specify the type of cursors to be displayed.	url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
4)	left	It sets a left margin edge for a positioned box.	auto, length, %, inherit
5)	overflow	This property is used to define what happens if content overflow an element’s box.	auto, hidden, scroll, visible, inherit
6)	position	It is used to specify the type of positioning for an element.	absolute, fixed, relative, static, inherit
7)	right	It is used to set a right margin edge for a positioned box.	auto, length, %, inherit
8)	top	It is used to set a top margin edge for a positioned box.	auto, length, %, inherit
9)	z-index	It is used to set stack order of an element.	number, auto, inherit