position attribute in CSS

Question

Can you tell me the exact functioning of position attribute in css and difference in two values i.e "relative" and "absolute". Please tell me it in context of following code:
I am absolute positioned

<section id="about" data-type="background" data-speed="10" class="pages">
     <article>Simple Parallax Scroll</article>
</section>

#home { 
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}

#home article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

#about { 
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

And may you also the proper functioning of "-webkit-box-shadow" attribute.

Answer 1

What is the difference:

When you use position relative you are making a div that will be relative to other divs with position absolute. Absolute will basically make the div or that element float above the document. Without having to follow the current dom or what you call it.

When you are simply using position: relative; you are not placing the div any where. But you are actually just creating a relative point for other elements if there is no relative div the position: absolute; will be following the document as relative.

From your css:

In your content, by following the CSS #home will be relative and #home article will be placed over it. Where ever you want to place it. And similarly #about article will be placed over #about.

You will not figure out what is the main idea of absolute or relative untill you write this: top: 0; this will remove all the margins from top side its similar to this margin-top: 0;. You can also try to move the div as much as you want.

Positioning simply lets you move the elements without having to follow the dom(or whatever it is). The basic difference between them is that relative will be the main place or main point from where the placement would start for children of that element. And absolute will follow any nearest parent and will get a new position.

Learn about them here:

Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/position

W3school.com: http://www.w3schools.com/css/css_positioning.asp (if you want to learn the basic).

CSS-Tricks: http://css-tricks.com/almanac/properties/p/position/

W3.org: http://www.w3.org/wiki/CSS/Properties/position