CSS Position

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>

Output:

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>

Output:

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>

Output:

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>

Output:

Explanation:

In the above example, we displayed the effect of the CSS absolute positioning.

CSS Position Properties:

Property Values Uses
bottom auto, length, %, inherit 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, %, inherit To define the left margin edge for a positioned box.
overflow auto, hidden, scroll, visible, inherit To specify what happens if content overflow an element’s box.
position absolute, fixed, relative, static, inherit To define the type of positioning for an element.
right auto, length, %, inherit To define a right margin edge for a positioned box.
top auto, length, %, inherit To define a top margin edge for a positioned box.
z-index number, auto, inherit To set stack order of an element.
Please Share