When you add Positioning property/values 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)
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.
Layout with <div> tags
Layer specific property/values
In addition to all the usual property/values of a <div> tag (width, padding, border, colour etc), layers can have the following property/values ...
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.
Visibility
You can control the visibility of a layer with JavaScript. Click here for an example.
Layer examples
You can find some HTML and CSS layer examples here.
Creating div tags & layers in Dreamweaver
Click here to read a tutorial on creating divs and layers with Dreamweaver.