osition: {position: normal/relative/absolute}
The position property lets you set a box’s position in the layout of a page.

The default value is normal; the box’s position is calculated according to other boxes. Relative lets you specify the box’s position in the layout relative to its default position, so other boxes still affect its final position. Absolute lets you specify the box’s precise position in the layout according to the box’s containing block, so other boxes cannot affect its position.

The position property allows a Web browser to process the top and left properties. Some browsers skip the top and left properties if the boxes have the default position value. To make sure that the browser processes the top and left properties, the position value of the boxes must be set to relative.

Left: {left: XXunits/%}
The left property lets you set the distance between the element box and the left edge of the containing block.

Positive values move an element to the right and negative values move an element to the left. The default value should be 0 if the left property is not used so the element is directly aligned with the left edge of the containing block. Remember that different browsers have different default values for different elements, so it is best not to assume anything.

You can specify values for the left property in either absolute or relative units. A relative unit calculates the distance from the edge of the containing block using the width of the containing block.

Some web browsers will skip the left property if the box has the default position value. Set the position value of the box to relative to make sure that the left property is processed.

Example:

	img {position: relative;		 left: 3in}

If you are using a CSS-enabled browser, the Project Cool logo appears 3 inches from the left edge of the browser window.

	img {position: relative;		 left: 25%}

If you are using a CSS-enabled browser, the Project Cool logo appears one quarter of the way across the browser window.

Top: {top: XXunits/%}
The top property lets you set the distance between the element box and the top edge of the containing block.

Positive values move an element down and negative values move an element up. The default value should be 0 is the left property is not used so that the element is directly aligned with the top edge of the containing block. Remember that different browsers have different default values for different elements, so it is best not to assume anything and to test everything.

You can specify values for the top property in either absolute or relative units. A relative unit calculates the distance from the edge of the containing block using the height of the containing block.

Some Web browsers will skip the top property if the box has the default position value. To make sure the top property is processed, set the position value of the box to relative.

Example:

	img {position: relative;		 top: 100px}

If you are using a CSS-enabled browser, the Project Cool logo appears 100 pixels below the top of thisbrowser window.

	img {position: relative;		 top: 50%}

If you are using a CSS-enabled browser, the Project Cool logo appears half-way down this browser window.

Display: {display: none/””/block/inline/list-item}
The display property’s most practical function is to hide or show an element. This function is often used in Dynamic HTML to hide and display elements based on the user’s actions. (See Hide and Zeek).

The value none prevents the contents of an element from being displayed by telling the computer to ignore the element. Unlike the visibility property where invisible boxesare still generated and still affect the layout, {display: none} prevents the box from being generated at all, so the element’s box does not affect the layout. “” is the null command; it shows a box that was previously hidden.

The display property also lets you define what kind of object an element is; this function is not used often. Elements can belong to three categories: block, in-line (inline), and list-item. A block element is usually a heading, paragraph, or another element that is displayed as a unit. An in-line element is located inside a block. A list-item element is an item located within a list tag.

Example:

If you are using a CSS-enabled browser, click on “Display” below to see the different values for the display property.

• none
• “”
• block
• inline
• list-item

Click again to make the list disappear. Notice how the layout changes as the list appears and disappears.

This is part of the code that was used for the above function:

	{ 	target = document.all( targetId );  		if (target.style.display == "none")  		{ 			target.style.display = "";  		}   		else   		{  			target.style.display = "none";  		}  	}	

For more explanation, see Hide and Zeek.

Visibility: {visibility: visible/hidden}
The visibility property lets you control the visibility of an element’s box;it is often used to display only one of many overlapping elements.

Visible makes a box visible, and hidden makes a box invisible. The layout of a document is still affected by an invisible box as though it were visible. A hidden box is rendered transparently and takes up space. In contrast, the display property prevents a box from being generated at all, so the element’s box does not affect the layout and does not take up space.

Example:

	img {visibility: hidden}

If you are using a CSS-enabled browser, the above Project Cool logo is not visible, but it still takes up space in this page’s layout because the image’s box is being generated.

	img {visibility: visible}

If you are using a CSS-enabled browser, you can now see the Project Cool logo.

Z-index: {z-index: XX}
The z-index property lets you set the stacking order of positionable elements. The boxesof elements can be stacked like pancakes. An element’s z-index value determines if it appears in front or back of another element.

Z-index values are integers that place elements on specific stack levels relative to their siblings and parent elements. Elements can have the same z-index value and be placed on the same stack level. Using the z-index, sibling boxes are stacked by increasing z-index value from bottom to top. Although parent elements may have any z-index value, within their own z-orders they have a z-index value of 0. Children elements with negative z-index values generate boxes below their parent element, and children elements with positive z-index values generate boxes above their parent element.

If the z-index property is not used, the stack level of an element is determined by default by the element’s position in the object hierarchy. Elements are stacked from bottom to top in the order they appear in the document tree, so an element is placed directly in front of its parent element.

The z-index property is useful when two elements occupy the same space and you need to specify which one should be visible. By default, if an element with transparent areas is stacked above another, it allows the element below it to be visible through its transparent areas.

Example:

These three elements are to occupy the same area on a Web page:

• img.window
• img.logo
• h1

  The z-index property.

Here are three different ways they could be stacked:

	img.window {z-index: 1}	img.logo {z-index: 2}	h1 {z-index: 3}	

If you are using a CSS-enabled browser, see what the above code would look like here.

	img.window {z-index:3}	img.logo {z-index: 1}	h1 {z-index: 2}	

If you are using a CSS-enabled browser, see what the above code would look like here.

	img.window {z-index: 2}	img.logo {z-index: 3}	h1 {z-index: 1}	

If you are using a CSS-enabled browser, see what the above code would look like here.