CSS Position

The CSS position property is used to set position for an element. It is also used to place an element behind another and also useful for scripted animation effect.

Here is the different ways we can control position of an element.

PropertyDescriptionValues
bottomused to set the bottom margin edge for a positioned box.auto, length, %, inherit
clipused to clip an absolutely positioned element.shape, auto, inherit
cursorused 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
leftsets a left margin edge for a positioned box.auto, length, %, inherit
overflowused to define what happens if content overflow an element’s box.auto, hidden, scroll, visible, inherit
positionused to specify the type of positioning for an element.absolute, fixed, relative, static, inherit
rightused to set a right margin edge for a positioned box.auto, length, %, inherit
topused to set a top margin edge for a positioned box.auto, length, %, inherit
z-indexused to set stack order of an element.number, auto, inherit

We can position an element using the top, bottom, left and right properties. These properties can be used only after position property is set first. A position element’s position property is relative, absolute, fixed or sticky.


Static Positioning

This type of positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.

Input:-

Index.html
	
<body> 
	  <div class=”box”>Positioned box</div>
</body>

Style.css
.box {
    padding: 20px;
    background: #7dc765;
}

Output:-


Relative Positioning

A relative positioned element is positioned relative to its normal position.

In the relative positioning scheme the element’s box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.

Input:-

Index.html
	
<body> 
	  <div class=”box”>Positioned box</div>
</body>

Style.css
.box {
    padding: 20px;
    background: #7dc765;
    position: relative;
    left: 100px;
}

Output:-

Note: A relatively positioned element can be moved and overlap other elements, but it keeps the space originally reserved for it in the normal flow.


Absolute Positioning

An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the ‘top-left’ corner of the browser window. The box’s offsets further can be specified using one or more of the properties top, right, bottom, and left.

Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, it can overlap other elements depending on the z-index property value. Also, an absolutely positioned element can have margins, and they do not collapse with any other margins.

Input:-

Index.html
	
<body> 
	  <div class=”box”>Positioned box</div>
</body>

Style.css
.box {
    padding: 20px;
    background: #7dc765;
    position: absolute;
    top: 200px;
    left: 100px;
}

Output:-


Fixed Positioning

Fixed positioning is a subcategory of absolute positioning.

The only difference is, a fixed positioned element is fixed with respect to the browser’s viewport and does not move when scrolled.

Input:-

Index.html
	
<body> 
	  <div class=”box”>Positioned box</div>
</body>

Style.css
.box {
    padding: 20px;
    background: #7dc765;
    position: fixed;
    top: 200px;
    left: 100px;
}

Output:-

Note: In case of the print media type, the fixed positioned element is rendered on every page, and is fixed with respect to the page box (even in print-preview). IE7 and IE8 support the fixed value only if a <!DOCTYPE> is specified.