DIFFERENCE BETWEEN ABSOLUTE, FIXED, STATIC & RELATIVE

 DIFFERENCE BETWEEN ABSOLUTE, FIXED, STATIC & RELATIVE

DIFFERENCE BETWEEN ABSOLUTE, FIXED, STATIC & RELATIVE

DIFFERENCE BETWEEN ABSOLUTE, FIXED, STATIC & RELATIVE:- Hi readers in this blog, I am going to explain you about how to use the position attribute of the div tag.The position is of 4 types absolute, relative, fixed and static  & the difference between absolute, relative, fixed & static.

STATIC POSITION

  • Static position is default type positioning
  • When an element have don’t have the position specifically set then by default it is static
  • When you code the first element comes first and the next element will come next and so on
  •  You cant do anything more with statically position element
  •   For Example:-

SOURCE CODE

<html>

<title>DIFFERENCE BETWEEN ABSOLUTE, FIXED, STATIC & RELATIVE</title>

<head>

<body>

<div style = "position:static;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:gray">first example of static</div>

<div style = "position:static;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:red">first example of static</div>

<div style = "position:static;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:blue">first example of static</div>

</body>

</head>

</html>

SNAPSHOT

DIFFERENCE BETWEEN ABSOLUTE,FIXED ,STATIC & RELATIVE

RELATIVE POSITION

  • The relative positioning element seems to do nothing unless you give one of the following the top: xx left: xx, Right: xx, bottom: xx
  • It takes it position from its parent, not from the browser
  • Relative position element doesn’t affect another static position element around it
  • For Example:-

SOURCE CODE

<html>

<title>DIFFERENCE BETWEEN  ABSOLUTE,FIXED ,STATIC & RELATIVE</title>

<head>

<body><div style="width:200px;background-color:red">First Pos</div>

<div style = "position:relative; left: 20px; top: 20px;background-color:blue">first example of relative</div>

</body>

</head>

</html>

SNAPSHOT

DIFFERENCE BETWEEN ABSOLUTE,FIXED ,STATIC & RELATIVE

Here in this example the relative block has taken its position 20px from Top from its parents and 20px from left it means after the first block it will take 20px from the first block

FIXED POSITION

  • Fixed element are completely Independent
  • Regardless of any parents, a fixed position element will always be positioned based on the browser window.
  • The interesting fact about the fixed position element is whenever the page is scrolled the position of the element is fixed
  • For Example:-

SOURCE CODE

<html>

<title> DIFFERENCE BETWEEN ABSOLUTE,FIXED ,STATIC & RELATIVE</title>

<head>

<body><div style="width:200px;background-color:red">First Pos</div>

<div style = "position:fixed;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:gray">first example of fixed</div>

</body>

</head>

</html>

SNAPSHOT

DIFFERENCE BETWEEN ABSOLUTE,FIXED ,STATIC & RELATIVE

 

ABSOLUTE POSITION

  • It takes its position from the browser not form parent
  • The absolute position element is removed from the DOM.
  • It affects the static position element when you give the position: absolute then the absolute position element will overlap the other static position element.
  •  For Example:-

SOURCE CODE

<html>

<title>DIFFERENCE BETWEEN  ABSOLUTE,FIXED ,STATIC & RELATIVE</title>

<head>

<body>

<div style = "position:absolute;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:red">first example of absolute</div>

<div style = "position:static;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:blue">first example of static2</div>

<div style = "position:static;height:100px;width:100px;left:10px;color:white;margin-left:200px;background-color:gray">first example of static3</div>

</body>

</head>

</html>

SNAPSHOT

DIFFERENCE BETWEEN ABSOLUTE,FIXED ,STATIC & RELATIVE

For explaining definition of CSS property. you can visit this link also.

Leave a Comment