To specify the position for an element, the CSS position property is used. It is useful for placing an element behind another. It also finds its use in the scripted animation effect. The top, bottom, left and right properties can be used after the position property to set the position of an element.
CSS Static Positioning:
Being a by default position, it positions an HTML element according to the normal flow of the page, and the top, bottom, left, and right properties do not affect it.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="static">
Hello World!!
</div>
</body>
</html>
Explanation:
In the above example, we displayed the effect of the CSS static positioning.
CSS Fixed Positioning:
To keep the text fixed relative to the browser window, the fixed positioning property is used. This fixed text doesn’t move even on scrolling the window.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="fixed">
Hello World!!
</div>
</body>
</html>
Explanation:
In the above example, we displayed the effect of the CSS fixed positioning.
CSS Relative Positioning:
To place an HTML element relative to its normal position, the relative positioning property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="relative">
Hello World!!
</div>
</body>
</html>
Explanation:
In the above example, we displayed the effect of the CSS relative positioning.
CSS Absolute Positioning:
Relative to the first parent element with a position other than static, we can position an HTML element using the CSS Absolute Positioning. Thus we can place an element anywhere on a page. The containing block is HTML, in case there is no such element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.absolute {
position: absolute;
border: 5px solid red;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div class="absolute">
Hello World!!
</div>
</body>
</html>
Explanation:
In the above example, we displayed the effect of the CSS absolute positioning.
CSS Position Properties:
| Property | Values | Uses |
| bottom | auto, length, | To define the bottom margin edge for a positioned box. |
| clip | shape, auto, inherit | To clip an absolutely positioned element. |
| cursor | 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 | To define the type of cursor to be displayed. |
| left | auto, length, | To define the left margin edge for a positioned box. |
| overflow | auto, hidden, scroll, visible, inherit | To specify what happens if content overflows an element’s box. |
| position | absolute, fixed, relative, static, inherit | To define the type of positioning for an element. |
| right | auto, length, | To define a right margin edge for a positioned box. |
| top | auto, length, | To define a top margin edge for a positioned box. |
| z-index | number, auto, inherit | To set the stack order of an element. |