Cascading Style Sheets Positioning Controls Visibility

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.

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

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 position: fixed –Supported in IE7+ (and MOSe of course). This is one way you can make a header or sidebar not scroll

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.

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 are not supported by all browsers. Also defining both left: and right: can cause conflicts

Stacking objects 3-D positioning You can use a position style called the z-index to give the sense of a 3 rd 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

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.

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;}

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

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 then #wrapper {position: relative; width: 90% margin: 0 auto;} May be used to put a background image in a paragraph.

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.

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;}

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.

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 ) –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.

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