Positioning in CSS:

With the help of CSS you can exact position your HTML elements. You can set the position of HTML element where you like to put it. So with the help of positioning in CSS you can manipulate position of any HTML Element.

You can set the position property of an element in top, bottom, right or left. There are four types of positioning which we learn in this topic.

  • Static Positioning
  • Fixed Positioning
  • Relative Positioning
  • Absolute Positioning

 Static Positioning:

Static positioning is the by default positioning of the HTML elements. The position of a static positioned HTML element is in normal flow of the page.

 Fixed Positioning:

Fixed positioning allows you in CSS to fix the position of a HTML element and it will not scroll when page scrolls means it will not move from its fixed place even the window scrolls. Also fixed positioned element can overlap other HTML elements.

In fixed positioning property you can pass two values one is “top” and “left”. Here is list moving types which is used in fixed positioning

  • Move left: use negative value for left
  • Move right: use negative value for left
  • Move up: use negative value for top
  • Move down: use negative value for top

Example:

 Relative Positioning:

Relative positioning in CSS changes the position of the HTML element relative to its normal position that appears.

In relative positioning property you can pass two values one is “top” and “left”. Here is list moving types which is used in fixed positioning

  • Move left: use negative value for left
  • Move right: use negative value for left
  • Move up: use negative value for top
  • Move down: use negative value for top

Example:

 Absolute Positioning:

Absolute positioning is used to set the absolute pixel value to position the HTML element. . Also absolute positioned element can overlap other HTML elements.

In absolute positioning property you can pass two values one is “top” and “left”. Here is a list moving type which is used in fixed positioning.

  • Move left: use negative value for left
  • Move right: use negative value for left
  • Move up: use negative value for top
  • Move down: use negative value for top

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *