I love how cool it is to use relative and absolute positioning in my CSS. When I first knew about this position thing, I was clueless, and was just keep using it randomly.
Since I haven’t been writing any tutorials lately, let me just explain some basic stuff about these two CSS positioning properties and how to use both of them together.
Example
Let say you want to have a small box with some text in it, floating on top of another bigger box with a background image in it. Here is a graphical view of it
Lets do this step by step. First, we prepare the bigger box with the background picture. Name it Boxer.
#boxer{
width: 500px;
height: 200px;
margin: 100px auto;
background: url(lomowalls.gif);
font-size: 11px;
font-family: Verdana;
position: relative; /*important part*/
}
Next, lets create a small yellow box, floating on top right side of Boxer. Name it smallbox.
.smallbox{
background: yellow;
width: 150px;
height: 50px;
position: absolute; /*important part*/
top: 10px;
right: 30px;
}
Then, write a simple HTML file.
<div id="boxer"> <div class="smallbox"> This is a small box </div> </div>
Make sure the smallbox is inside the Boxer.
As you can see in the picture, the small yellow box is positioned “absolutely” , “relative” to the Boxer, with 10pixels from the top and 30pixels from the right. Does that make sense?
For learning purposes, take out the position:absolute property, and you’ll see the smallbox will be at the same position of the blue box in the picture.
Also, lets modify the HTML by placing the smallbox class outside of the Boxer. You’ll get a result similar to that red box. Why is that? Because, now, the smallbox is positioned “absolutely“, “relative” to your browser, not to the Boxer anymore. Notice the 10pixels and 30pixels gap on top and right side of the browser, respectively. It will also move if you re-size your browser.
→ Download the source code to try it yourself
CSS Tips
When experimenting with CSS, it is good to learn using trial-and-error method. Firebug is a great tool to assist you for this method. Use boxes with different colours to arrange your basic layout so you can distinguish each sections and approximate the placement later.
nice tips! now teach us how to write apps! haha..
lol. how come i never knew about this before. Haha.
So, that’s how make those super-cool custom field box in this blog homepage?
great tips… come on bro… we want more.. hehehe..
To me, absolute positioning is really great to use in certain circumstances, e.g:
1. I want my markup(xhtml) be logical, but in the same time, I want my visual/design become what that I want. Contoh macam ni, selalunya, header dulu baru navigation, kan? Yang selalu orang buat, dalam markup dia letak navigation dulu dalam markup.
Jadi bila guna absolute positioning, boleh buat suka-suka hati(pun ada limitation gak). Hehe..
Lagi satu, sekarang ni ramai yg suka letak banner ads yg panjang tu kat atas header.
Kalau ikut tutorial ni betul-betul with a slight modification, tempoh loading blog yg letak iklan kat header tu boleh dikurangkan.
Sebab sebelumnya, browser akan load script ads dulu, baru dia load content.
Lepas guna absolute positioning, browser akan load content dulu, baru ads.
Nice write up Flisterz. =)
nice basic tutorials. good examples too. sape2 yang takde knowledge css pun boleh faham. buat lagi tutorial! biar lengkap css semuanya. haha.
nice and straight to the point .. now i understand positioning.
next, can you explain hover with image effect css tutorial? a la your comment and date box itu. that one is tight bro..
@derred: haha wait for it
will give more
oh that one. will consider it later
@syuxx: yeah, kinda. heh
@khai: thanks
@bat: woh panjang. aku setuju, gune positioning boleh buat suak-suka. heh. bagus gak idea pasal loading iklan tu.
@khalil: ye ke boleh faham?haha tu ah biar habis semua css
@fadzli: thanks
idea iklan tu aku dah try byk kali dah tak jadi.
website kau ni buat aku jealous,
your a smart one brother,
hey help me i’m new to all this shit
aha
mane aci.. apsal ko punye avatar boleh mengecil membesar..
im new here..
since my teacher ask me to open some of the e-shop online,sy tesinggah kat cni..
wat a smart website..
gudluck!!!
i bought myself an Aluminium Macbook… yeay!
China and Russia put the blame on some screwed up experiments of US for the earthquake that happened in Haiti.
Chinese and Russian Military scientists, these reports say, are concurring with Canadian researcher, and former Asia-Pacific Bureau Chief of Forbes Magazine, Benjamin Fulford, who in a very disturbing video released from his Japanese offices to the American public, details how the United States attacked China by the firing of a 90 Million Volt Shockwave from the Americans High Frequency Active Auroral Research Program (HAARP) facilities in Alaska
If we can recollect a previous news when US blamed Russia for the earthquake in Georgio. What do you guys think? Is it really possible to create an earthquake by humans?
I came across this article about Haiti Earthquake in some blog it seems very interesting, but conspiracy theories have always been there.
hello! descry osx two shakes of a lamb’s tail torrents here
http://www.gamingmajor.com