CSS Element Positioning
CSS Element Positioning
Chapter - 17 : CSS Element Positioning: (Page 1/2)
The use of CSS positioning element is very common and it places the various sections at there pre-defined places. Through CSS, the position (in web page) of various elements can be decided. Elements can be positioned using the top, bottom, left, and right properties. However, this property works differently based on positioning method. Therefore it is advisable to use one out of following four methods.
i) Static Positioning: If no method of positioning is defined then the elements are positioned as per normal flow of page. The element which called first in page will take the left top place and so on. The elements will adjust them selves in the next available space on page. This is known as static positioning.
ii) Fixed Positioning: An element position can be defined by fixed positioning. In this case element will be positioned relative to the browser window and it will not move even if the window is scrolled. The document and other elements behave in such a way, as if the fixed positioned element does not exist. In this case if the window is scrolled, then fixed positioned elements can overlap other elements.
Command: h1 { position:fixed; top:30px; left:5px;}
Here h1 will be always displayed at 30 px down from Top and 5 px from left. This is similar to one explained in 'Background Attachment.
iii) Relative Positioning : In this case the block element is positioned with respect to its parent element or its normal position. Therefore if the parent element becomes bigger or shorter, then it will automatically move up or down.
Command: h1 { position:relative; top:30px; left:5px;}
Here h1 will be displayed at 30 px down from Top and 5 px from left from the point the parent element is finished i.e. if parent element is finished at 100 px Top and 20 px left, then the h1 will be displayed at 130 px down from Top and 25 px from left of window.
(Cont......... to next page (Pg-2))
© funandhobby.com (CSS Element Positioning)