Difference between relative and absolute positioning

Relative Positioning

• When position:relative is given to an element without any other attributes (top, bottom, left, right) nothing will happen.
• But when an attribute left:20px is added the element moves 20px to the right from its normal position. The element effects no other element on the layout. Other content will not be adjusted to fit into any gap left by the element.
• The child of this element can be positioned within this block only. So position:relative has its limitations.

HTML CODE

FIRST
  
SECOND

CSS CODE

@charset "utf-8";
/* CSS Document */
#a1	{
  width:304px;
  height:154px;
  background-color:white;
  border:2px solid blue;
  position:relative;
  text-align:center;
}
#a2	{
  width:304px;
  height:154px;
  background-color:white;
  border:2px solid orange;
  top:70px;
  left:30px;
  position:relative;
  text-align:center;
}

Absolute Positioning

• When position:absolute is given to an element the element can be placed precisely where one wants to.
• The element is positioned nearest to the first relatively or absolutely positioned parent element.
• When there is no parent element the absolutely positioned element is positioned directly to the HTML page itself.

HTML CODE

CSS CODE

@charset "utf-8";
/* CSS Document */
.a1	{
  width:304px;
  height:304px;
  background-color:white;
  border:3px solid blue;
  text-align:center;
  position:relative;
}
.a2	{
  width:154px;
  height:154px;
  background-color:white;
  border:3px solid orange;
  text-align:center;
  position:absolute;
  top:100px;
  left:40px;
}

For more details about HTML CSS

Article written by HARSHAL ARORA

8368443489

9873405903

[email protected]

Contact me on Facebook

The post Difference between relative and Absolute Positioning appeared first on Sanjay Web Designer.