CSS - layout & positioning with layers by Matt Ottewill

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.

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 ...

  1. Static (or normal) positions an element (such as a table or image) in the normal flow of HTML text and tags.
  2. Relative means an element is positioned relative to the top left corner of a parent object (such as a frame)
  3. 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.

Related downloads

None at present

Related ads