0

I am getting started in html5 and css, I have little bit confused using css position .

I can find from stack overflow these links,

Difference between relative and absolute

When to use CSS positioning?

Position absolute but relative to parent

still i can't able to fixed out, I need to know all the position property with example and in which situation have to use which position property for developing web page.

Can you help me sir?

Any help would be highly appreciated. Thanks in advance.

Community
  • 1
  • 1
deepika
  • 65
  • 1
  • 11

1 Answers1

1

.parentClassDiv{
  position:relative;
  border-color:red;
  border-radius:4px;
  border-style:solid;
  height:150px;
  top:100px;
  }
.relativeClass{
  position:relative;
  border-color:green;
  border-radius:4px;
  border-style:solid;
  top:80px;
  left:30px;
  }
.absoluteClass{
  position:absolute;
  border-color:blue;
  border-radius:4px;
  border-style:solid;
  top:120px;
  }
.fixedClass{
  top:30px;
  position:fixed;
  border-color:yellow;
  border-radius:4px;
  border-style:solid;
  left:10px;
  }
.staticClass{
  top:10px;
  left:10px;
  position:static;
  border-color:brown;
  border-radius:4px;
  border-style:solid;
  }
<html>
  
  <head>
  <title>difference b/w relative,absolute,fixed,static</title>
  </head>
  <body>
  <div class='parentClassDiv'>
    <span class='relativeClass'>hello..I am relative..positioned top-40px and left:30px..relative to my parent div(red color)</span>
    <span class='absoluteClass'>hello..I am absolute</span>
    <span class='fixedClass'>hello..I am Fixed..I will be positioned from the page top(i.e:it parent always be html tag)</span>
    <span class='staticClass'>I am Static.even top is 100px.i will be positioned on my place in my parent tag(red color).i will not take top,bottom,left,right.and also i started here only because green color is relative (reserved it place and moved to bottom)</span>
  </div>
  </body>
  
</html>
ramanathan
  • 104
  • 1
  • 2