CSS Position: The position property in CSS is applied to set the position of the elements. It can be used to position the backside of an element. It is also helpful for the scripted animation outcome.

We can place an element with the use of the left, right, top, and bottom properties. Firstly, we have to set the position property before using these properties. A computed position of the position element can be absolute, relative, sticky, and fixed.

There are some Positioning in CSS, which are listed below:

  • Static Positioning in CSS
  • Fixed Positioning in CSS
  • Relative Positioning in CSS
  • Absolute Positioning in CSS

Static Positioning in CSS

The static position is used as the default position on the web. It sets the element’s position always on the basis of the general flow of a page. This property can’t be affected by any left, right, top, and bottom properties.

Fixed Positioning in CSS

A fixed text over the browser can be used efficiently by the use of this fixed poisoning CSS property. The text will not move even when we scroll that window.

Example:

Consider the following example:

Output:

CSS Position

Relative Positioning in CSS

This property in CSS sets an element that is relative to their normal position.

Example:

Consider the following example:

 Output:

CSS Position

Absolute Positioning in CSS

The absolute positioning in CSS is employed to position any component, i.e., relative to its first parent component that includes any position other than the static position. If no such component is found, the corresponding block is HTML. We can place the component anywhere on the page by using this absolute positioning.

Example:

Take a look on the following example:

 Output:

CSS Position

Pin It on Pinterest

Share This