By default in HTML, all objects fit on the page, or more specifically, they don"t overlap. Sometimes however, you want your elements to overlap to create a certain effect such as in this example. If you want to tell an object that it is allowed to overlap other objects you must begin by giving it the following CSS property.


This tells the browser that instead of positioning the element based on other elements, you want to position the element based on coordinates. Once this is done you can use the "left" and "top" properties to tell the browser where exactly the element is to be placed. For example below, the element would be placed 20px away from the top and 5px from the left hand side of the browser window.


Now that we have our elements set up so we can position them wherever we want, we need to tell the browser what order they appear in. To do this we use a property called "z-index". The higher the "z-index" of an object, the higher it will display in the layer order. Below is an example of a "z-index" of 10.


It is really that simple, bear in mind that the left and top properties don"t have to be "px" values, for example they could be "%" values and thus allow you to create an expandable layout that uses layers.


Print Entry