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 refers to the area where the HTML document is rendered.

The active window should be considered a rectangle. The rectangle has a position in the window. The top left corner is the position of the element in the window. The element (based on its defined or specified width and height) expands to fill in the rectangle. The default for the first object in the window is (0,0)

Position Types Static –Defined based on the position of the element in the body of the document. Relative –Defined based on its parent object Absolute –Defined based on a rectangle starting from the top-left corner. Fixed –Not supported in IE or Netscape

Defining an Object Position To position an element, You define the type of position And 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 window 3ems down and 5ems from the margin.

Defining the margins 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

Defining a negative value for –Top will cause the element to be raised above –Left will cause the element to be moved on the opposite side of the margin.

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. In order to cause the position to happen, you use the position, top, left and z-index to define the object position. 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;}

Example To make them seem like a progression, change the side of the image (width and height)

.pos1 {position:absolute;z-index:0;}.pos2 {position:absolute; top: 2em; left: 3em; width: 10em; height: 25em; z-index:1;}.pos3 {position:absolute; top:5em; left;7em; width: 5em; height: 15em; z-index:2;}

Absolute within a Relative If you use position an object using an absolute style within a relative element, the absolute object will appear in an absolute place within the relative box. 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. If you move the absolute object— everything moves.

Visibility You may set the visibility of an object to be 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.

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. overflow: –Scroll Sets the scroll bars around the visible area –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.