POSITION
... style="position: absolute|relative; top:###px; left:###px;" Absolute and
relative positioning are the main methods used to place elements on your webpage. You can specify either, both, or none of these attribute/value sets. In absolute positioning, the position is determined without regard to the other parts of the page. Here's an example:
Code:
<div style="position:absolute; top:100px; left:100px;">Content 100 pixels from the page's left and top edges</div>
Not too tough: The number after "top" is the number of pixels (px) away from the top of the window. "Left" is the distance from the left side. You can also use a percent (e.g.,
left:50%) instead of a specific number.
You'll use relative positioning when you want to have the distance measured from wherever the webpage flow was last. For instance, if you had a graphic added in a SPAN tag with the
style="position:relative; ..." after the above content, then it would appear below and right of the text.
VISIBILITY
... style="visibility: hidden|visible|inherit;"
This attribute is used to make an element appear or disappear, as one would expect. A hidden element still takes up the space on the page even though it can't be seen. When you use "inherit", the element becomes visible or hidden based on its parent element -- a picture inside of a DIV tag, for instance.
This is handy because you can use JavaScript and other languages to dynamically make parts of the page appear or disappear, like if you want to make helpful descriptions pop up when the user's pointer goes over a certain word.
Z-INDEX
... style="z-index:[-]###;"
Finally, there's the Z-index. This is used when you want to layer parts of the webpage, one on top of each other. Say you want to make a red box with a shadow for a menu item. Here's the code:
Code:
<DIV style="position:absolute; top:100px; left:100px; width:70px; height:20px; background:red; z-index: 5"><CENTER>HOME</CENTER></DIV>
<DIV style="position:absolute; top:105px; left:105px; width:70px; height:20px; background:black; z-index:-10"> </DIV>
The Z-index can be any number, positive or negative, including zero. The layers will appear on the page from the biggest negative number up to the biggest positive.
Positioning with CSS-P 
Linear Mode
