Absolute Position of Div Layer

When the position propery of a div layer is set to absolute, it will be aligned according to the following scenerios.

Case 1: Div Layer Itself Set to Absolute Position

When the position of a div layer is set to absolute, the position properties will be aligned according to the browser window.

In this example, the top property of this div layer is 100px. That is, the top side of the div layer will align at 100px from the top browser window

The left property of this div layer is also 100px. That is, the left side of the div layer will align at 100px from the left browser window.

div layer absolute position example 1

Please click here to see this live example of div layer absolute position.

Case 2: Div layer is contained inside a div layer with Static Position

Although the div layer (absolute position) is contained inside a div layer (with static position), the position property is still align according to the browser window.

div layer absolute position example 2

Please click here to see this live example of div layer absolute position.

Case 3: Div layer is contained inside a div layer with Absoute Position

In this example, layer1 is contained inside a div layer with absolute position (outerWrapper). In this situation, the position property will be aligned according to the top left corner of the outerWrapper div layer.

div layer absolute position example 3

Please click here to see this live example of div layer absolute position.

HTML CSS Tutorial contents: Div layer position property - Static Position, Absolute Position and Relative Position.