1. Cascading Style Sheets
Positioning Controls
Visibility

2. Positioning in the Window
The browser window has 2 specific areas—the window and the active browser window.
The active browser window (viewport) refers to the area where the HTML document is rendered.

3. The default for the first object in the window is (0,0) (top, left).:
This is in contrast to standard X,Y plotting coordinates which have (0,0) in the bottom left corner

4. Position Types position: static
Defined based on the position of the element in the body of the document.
position: relative
Defined based on its parent object; if not specified, it's the body
position: absolute
Defined based on a rectangle starting from the top-left corner. Of the parent element. Objects are "out of the flow" of the normal document, so typically use a position:r elative wrapper <div>
position: fixed
Supported in IE7+. This is one way you can make a header or sidebar not scroll

5. Defining an Object Position
To position an element, you define the type of position, and usually the top-left corner of the object in the window
Example
{ position: absolute; top : 3em; left : 5em;}
An object using this style definition would be positioned in the top of the parent/window 3ems down and 5ems from the left margin.

6. Defining position: Options for top and left A value
em or px
a percentage –relative to the parent’s width
auto (based on the browser calculation and the absolute position)
Right and Bottom are also options but they can override top and left. Also defining both left: and right: can cause conflicts

7. Stacking objects 3-D positioning
You can use a position style called the z-index to give the sense of a 3rd dimension (or stacking of the objects) in relationship to one another.
Objects which are stacked are given z-index starting with 0. E.g..: z-index: 10; (Hint: use values such as 1, 10, 100 to be sure order is enforced)
In order to cause the stacking to happen, you use the position, top, left and z-index to define the object position. Elements w/o position: won't stack.
You can change the appearance by redefining the width and height.
If you don’t set the z-index, the elements stack in the opposite order and the large one is set on top

8. You may use the position styles to lay a series of the same object on top of itself.
Set the first object as absolute with a top and left and a z-index of 0.
Set the second object as absolute with a higher top and a further left value and a z-index of 1.
Set the third object as absolute with a higher top and a further higher left value and a z-index of 2.

9. Example .pos1 {position:absolute; z-index: 0}
.pos2 {position:absolute; top: 2em; left: 3em; z-index: 1;}
.pos3 {position:absolute; top:5em; left;7em; z-index: 2;}

10. Floats
float:
Options are :left; :right; Note therefore you cannot float: top; and so on.
Should specify width for floated elements
Combine with clear: (left; right; both;) to move next element below floated elements, e.g. for footers #footer {clear: both;}
Some (e.g. Zeldman) stick to floats even though position: has more semantic meaning

11. Absolute within a Relative
If you position an object using an absolute position within a relative element, the absolute object will appear in an absolute place within the relative box. Often used for wrapper <div id="wrapper"> then #wrapper {position: relative; width: 90% margin: 0 auto;}
May be used to put a background image in a paragraph.

12. Relative within an Absolute
The absolute object is positioned—the relative object is positioned within the limits of the absolute window (see "dropshadow" example)
If you move the absolute object—everything moves.

13. Visibility
You may set the visibility of an object to be hidden {visibility: hidden;}. This will cause the space for the object to be allocated in the page and a big rectangle placed where the object should be in the page.
With a visibility setting the object is allotted space in the page—with display set to none, no space is set in the page. {display: none;}

14. Clipping an Object
You can cause the portions of an object to be clipped
Style
clip: rect(top,right,bottom,left)
The values are distances from the element’s origin.

15. Overflowing an Object
Defines how an object is displayed when it doesn’t fit in area (e.g. when clipped).
overflow:
scroll
Sets the scroll bars around the visible area (acts like an <iframe>)
hidden
Hides the overflow area and the scroll bars
visible
Causes the clipped area to shop up over the area.
auto
Allows the browser to define how to handle this overflow.

16. Opacity Use of filter: for old IE opacity: for MOSE
Opacity Use of filter: for old IE opacity: for MOSE. Also we'll look at rgba(), part of CSS3, and there are new CSS filters
cursor: (lots of options, e.g. cursor: help; for popup boxes)
Scrollbars (old IE only)