Expression-Web-Tutorial.com

www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart


A Place For Beginners

Expression Web 4 Tutorial:  Learning about Layers

A Layer is a div tag with a CSS position of 'absolute'  (also called an AP div)

Objective:  Learn What a Layer is and When to use a Layer

Many Beginners tend to use Layers to design their pages because they can click and drag a layer and easily position it any where on the page..... well, it seems that way at first.

True:  a layer can be moved around the page by clicking and dragging it.  The reason for this is due to its absolute positioning.

However, that is not a good reason to use a layer....  Only use a Layer when you need to achieve design goals or you need to overlap two or more page elements. 

When would you commonly use a Layer?It's very common to see layers (ap divs) used in dropdown menus.

Positioning

To understand the positioning schema of a Layer, it would help to first understand the Normal Flow of  the Page.  (Normal flow is the default flow or positioning schema).  When you understand the Normal Flow, you will then understand the need for various Positioning techniques.

Positioning techniques typically require you to 'remove' an element from the Normal flow in order to position the element where you want it.

The Normal Flow of a Page

.... is made up of static elements that flow

  • 1. left to right (inline elements) and
  • 2. top to bottom (block level elements)

Static Positioning is the default position of most elements. (See CSS Positioning Properties)

We can alter elements in the Normal Flow by applying some sort of positioning technique.

Example:  The CSS Float property is commonly used to float divs and other elements so that we can position two block boxes side by side. Floating an element partially removes it from the Normal Flow of the Page, thus allows the next element to sit to the right or left of it.  (be sure to clear the float if unwanted content rises up to where you do not want it!!)

In the case of Layers, the div is given a position property value of 'absolute'.  This completely removes the div from the Normal Flow of the Page and you can position it with pinpoint accuracy....well....maybe.

In order to position a layer (absolute positioned div tag) with pinpoint accuracy, you must first set a Point of Reference in which the layer is to be positioned according to.

Oftentimes, we set a new point of reference for positioning layers on the Container.  The way we do this is by giving out container (#container) a position value of Relative.

 #container {position: relative;}

The container will not move.  Instead, it's become the new point of reference for positioning layers.  In other words, the Layer will be positioned according to the position of the Container.

See, normally a layer is positioned according to the outer edges of the screen.  By changing the container to relative, we now position the layer according to the edges of the Container.  Thus, achieving pinpoint accuracy.