Introduction

IMPORTANT NOTE : You may wish to read the article on Layout & positioningWITHOUT layer first, to ensure you understand the concept of <div> tags and nested <div> tags.

When you add Positioning attributes to a <div> (divisional) tag it becomes a layer. A layer is a seperate "element" that can "float" above a page. You can ...

overlap multiple layers

define which are on top and which are underneath

control their position with absolute precision relative to the left, right, top and bottom of a browser window

control their position relative to other elements (when you nest a layer insider another <div> tag)

Layer specific attributes

In addition to all the usual attributes of a <div> tag (width, padding, border, colour etc), layers can have the following attributes ...

Position type

Layers can be positioned with absolute accuracy in the page, or a relative distance from another element when they are nested.

Layers in an HTML document can be positioned in 3 ways ...

Static (or normal) positions an element (such as a table or image) in the normal flow of HTML text and tags.

Relative means an element is positioned relative to the top left corner of a parent object (such as a frame)

Absolute positioning locates an element seperatly from the normal flow of HTML text as a separate "floating" entity positioned according to X and Y co-ordinates. Absolute positioning is only available with layers and layers use the <div> tag.

Placement

A layers position can be defined in pixels as a distance from the top, bottom, left and right of a browser window or an element (such as a <div> that it is nested within.

Z-index

The Z-index allows you to control which elements are in front and which are behind. A layer with a Z-index of 2 will be on top of a layer with a Z-index of 1. You can also overlap elements and create clipping paths.