Javascript and CSS Animations: The Difference of Element Positioning.
Posted by triaslama on March 5, 2008
Element positioning defines how an element will be positioned in the document. We adjust the element positioning through Cascading Style Sheets (CSS) property named position. In the following example we set div element’s position to its absolute location (external CSS):
div
{
position:absolute;
top:0px;
left:100px;
}
Position property can hold static, relative, absolute, or fixed value. Below simple explanation and example of each positioning:
1. Static positioning:
Static positioning is the default positioning of an element, it just flow one after another like what is appear in HTML source. Top and left properties doesn’t affect the document appearance. Consider the following HTML code (positions.htm):
<html>
<head>
<title>Element Positioning</title>
<link rel=”stylesheet” type=”text/css” href=”positions.css” />
<script lang=”javascript” type=”text/javascript” >
</script>
</head>
<body>
<div id=”firstDiv”>
Bunda pernah berkata kurang lebih… (I cut some contents here).
</div>
<div id=”secondDiv”>
Setelah ayahku meninggal maka ibuku harus menjadi ‘Single Parent’ bagiku…
</div>
<div id=”thirdDiv”>
Pada saat aku sudah bekerja di Jakarta…
</div>
<div id=”fourthDiv”>
Bunda sering berpesan agar aku tidak membedakan perlakuan…
</div>
</body>
</html>
Positions.htm refers to a CSS file named positions.css, here the external CSS file:
div
{
font-family:verdana;
font-size:12pt;
border:2px solid goldenrod;
background-color:lavender;
position:static;
width:450px;
}
The couple of code will give the following result:
With static positioning the document just flow as what is appear in HTML code.
2. Relative Positioning
Relative positioning behaves much like static positioning, but top and left properties affect the document appearance. The position for this positioning relative to its preceding element.
Add the following to our CSS file:
div.specialized
{
position:relative;
top:-40px;
left:-35px;
}
After that add a class attribute to the ‘secondDiv’ div element:
<div id=”secondDiv” class=”specialized”>
Refresh our page now you will see a page that look like this:
Relative positioning, the element position relative to its preceding element.
3. Absolute Positioning
If an element’s positioning specified to absolute that element will be pulled out from document flow and precisely placed in the specific position relative to its current parent element that has non static position. If no such exist the element will be placed in specified position toward entire document.
Lets change the CSS file into the following:
div.specialized
{
position:absolute;
top:0px;
left:0px;
}
Then we should get the following result:
Absolute positioning, the element placed absolute to its entire document, if there is exist an element than it will overlap.
4. Fixed Positioning
Fixed positioning places an element relative to browser window (viewport), so if we scroll the browser element with fixed positioning will remain in such position.
Change our CSS file into the following:
div.specialized
{
position:fixed;
top:0px;
left:250px;
}
Refresh our page and try to scroll down the window, and the ‘secondDiv’ element will remain
in the top of viewport!
Fixed positioning. Even though we scroll down / up the window, an element with fixed position will remain in its position toward viewport.
Note: I try fixed positioning in Internet Explorer (IE) 6 and it doesn’t work
well. We need IE7 or higher to make it work!
Element positioning can make sense in some situations! I hope this useful & thanks.
Read, With the Name of Your Lord Who Created 
Leave a comment