E.g position: relative|static|absolute|fixed;
either any of the values can be incorporated like this to be used.
#movebox {
position: relative;
}
.shift {
position: absolute;
}
Using the relative value, the element can be positioned in the exact location according to how it was coded, and using the “top,bottom,left or right property” you can push the element into another further direction.
#movebox {
position: relative;
left: 25px;
bottom: 2px;
}
.shift {
position: absolute;
right: 50px;
top: -12px;
}
Now you have a basic understanding how CSS positioning works (To Learn more visit our CSS Tutorial on Positioning).
Using relative value, the element is position relative on the web page taking up space, using absolute value, the element does not take any space and hence can be placed in any location but if the browser is re-sized, the element is not, the “static” value does not work with the “left,top,right or bottom values” so if used, the element will be positioned according to how it’s coded, the “fixed” value will fix the element to that position where it’s placed even if the page is scrolled or re-sized. To work around this, you can use both relative and absolute in the same manner. take for example,an empty room, if sound is produced there, it can echo because there’s no object blocking the flow of sound wave but if that same room is filled with objects like wardrobes and tables, an echo can’t occur there anymore, this is because sound wave cannot travel as freely as when its empty. The same thing occurs with using a relative and an absolute position in two separate element in an HTML document, first of all you declare a relative position and keep it simple or at “zero pixel” when using either the “top,left,right or bottom property”. then create an absolute element inside the relative one, then you can move both using the “left,right,top or bottom property” and finally you’ll notice that with this, you can position any element absolutely anywhere but relative to that position that was absolute? A typical example would be this advert that’s placed on this website.
<div style="position:relative; top: 360px;
left:220px; display: inline; width: 400px; height: 70px;">
<div style="position: absolute; left: -10px;
top: -720px; border: 1px solid black; display: block;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/
pub/shockwave
/cabs/flash/swflash.cab#version=10,0,0,0"
width="400" height="70" id="phcityad" align="middle">
<param name="allowScriptAccess"
value="sameDomain" />
<param name="allowFullScreen"
value="false" />
<param name="movie" value="http://www.phcityonweb.com/wp-content/uploads/
2010/10/phcityad.swf" /><param name="quality"
value="high" /><param name="bgcolor" value="#cccccc" /> <embed
src="http://www.phcityonweb.com
/wp-content/uploads/2010/10/phcityad.swf" quality="high" bgcolor="#cccccc"
width="400" height="70" name="phcityad"
align="middle" allowScriptAccess="sameDomain"
allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/
getflashplayer" /> </object></div></div>
As you can see, i placed two <div> box that contained my content.Then, the first div was positioned relatively and the second was positioned absolutely inside the first…with these, you can position any element on anywhere on your web page relatively but absolute to the position of the screen where you want it to display while using the directional property(left|right|bottom|top),without the fear of it moving along with the browser once it’s re-sized or the element taking up space in the containing place where it’s located in the code of your web document.
My cousin recommended this blog and she was totally right keep up the fantastic work!