the making of a webdev - 4
The topic of the day is “positioning”, the first thing after floating is the positioning of elements I was forced to learn. There is a lot of emphasis on the richness of the web content presented to the user, these days. Small images, texts, round corners, uncluttered and simple design, everything calls for this thing known as “CSS positioning”.
position:absolute was something I knew before even I did my first web project. I seemed to know its meaning through intuition, that was fairly correct as well. Its meaning is to position an element absolutely on the screen, by specifying co-ordinates. You specify, top/left/right/bottom or/and width/height, the element is positioned absolutely on the screen with respect to the co-ordinate system. The subtle thing that came out after reading up some theory is that the element is taken off the normal flow and positioned absolutely.
The next important thing about positioning is knowing to position an element relatively within a container. Now the concept of a container is that, an element (usually a div) acts like a box holding other boxes inside of it. A div can be made to act as a container by positioning it relative (position:relative). Now, if elements inside of a container are positioned absolute, then they will be positioned relative to the container box and not relative to the screen (viewport).
The above knowledge of CSS positioning is fairly sufficient enough to do web dev-ing. There is yet another thing called position:static which doesn’t have much importance because elements by default are positioned static (they are positioned as they would appear in the normal flow). Yet another positioning is position:fixed which positions the elements as per the offset properties, relative to the viewport, the only difference in this case is that even if the window is scrolled, the fixed position elements stay afloat.
Another theoretical know-how is the use of position:relative on a standalone element. If position:relative is used on a element in a stand alone fashion with offset properties applied (like top/left/right/bottom), what happens is that the element is laid out as it would position in the normal flow and then the relative sizes are applied with reference to the normal position. It should be noted that the space occupied by the element in the normal flow is kept intact.
Positioning is also synonymous with "layering" or "stacking" Because using positioning, elements can be placed one over the other. In this context, there is a property called z-index which implies the depth of the placements of elements. Sure enough, there is a mess in rendering elements with z-index in some cases in browsers like IE.
If you are looking for a hands-on try, use firebug along with the scenario text at URL[1]
[1] http://thanix.info/webdev/basics/position-1.html
Keep me posted on your thoughts to: thanix[at]gmail[dot]com
Written by thanix on December 12th, 2007 with
no comments.
Read more articles on basic and webdev.
- [+] Digg: Feature this article
- [+] Del.icio.us: Bookmark this article
- [+] Furl: Bookmark this article