You can position <div> boxes "absolutely" on a page by using "position: absolute" in your CSS code. This would position the box relative to the browser screen regardless of where the box's code is located in your HTML.

An absolutely positioned box can be placed with pixel precision on the screen using "top:" and "left:" with pixel values. Percentage values can also be used.

A box can also be positioned relatively by using "position: relative". This would tell the browser to render the box according to its position in the HTML code similar to an image or a <table>. Values for "top:" and "left:" would indicate coordinates based on a parent element, like a table cell or parent <div> box -- not the overall browser screen.

When making several <div> boxes, you can style common elements among the boxes, like a common background color, with CSS Custom Classes. Individual differences, like positioning, can be styled with IDs.

You can control how your boxes "overlap" by setting a "z-index:" value. This value is any number like "2" or "10". The higher the number, the closer to the top the box will appear. Negative numbers can be used. The highest "z-index:" will be on top, the lowest will be on the bottom.

You can make your boxes invisible by using "visibility: hidden;". To make it appear again, use "visibility: visible;". This is the foundation for making pop up menus.

You can nest <div> boxes inside each other. Generally when this is done, the child boxes -- the ones that are nested -- are positioned relative to the parent box. There is no limit to the depth of nesting.

All right, if you've got the above down pretty well, try to make this example.

To Second Advanced CSS Exam

Back To Advanced CSS Index