Cascading Style Sheets - Absolute Positioning

Position Within The Browser Window By default, your browser window is layer 0 and all new layers are anchored to it using the "left" and "top" properties to define the location within your browser window to place the new layer.

Absolute positioning within the browser window means you are defining a new layer whose starting location is determined by measuring from the top left corner of the browser window.

In the example below, three layers are defined using the <div> tag. To use absolute positioning, the position property is set to absolute and the top and left properties are defined for each <div> .

By default, layers defined later sit on top of layers defined earlier. Controlling the order of the layers will be discussed later.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">

<head>
<title>Layer Example</title>
</head>

<body style="background-color : #ffffff">

<b>Layer 0</b> (The browser is the default layer)

<div style="background-color: #ccffcc;
            border  : solid 1px #000000;
            color   : #000000;
            padding : 8px;
            position: absolute;
            left    : 10px;
            top     : 110px;
            width   : 200px;
            height  : 100px;">
  <b>Layer 1</b><br />
<br />
</div>

<div style="background-color: #ccccff;
            border  : solid 1px #000000;
            color   : #000000;
            padding : 8px;
            position: absolute;
            left    : 40px;
            top     : 140px;
            width   : 200px;
            height  : 100px;">
<b>Layer 2</b><br />
<br />
</div>

<div style="background-color: #ffcccc;
            border  : solid 1px #000000;
            color   : #000000;
            padding : 8px;
            position: absolute;
            left    : 70px;
            top     : 170px;
            width   : 200px;
            height  : 100px;">
   <b>Layer 3</b><br />
   <br />
</div>

<br />
<br />

</body>
</html>