www. Expression - Web - 3 .com
1.866.363.5633
Quick Start Checklist
Video Tutorials
CSS & HTML Tutorials
Training DVDs & Products
Expression Web 3 and Layers
What is a Layer?
A Layer is a <div> tag that is positioned 'Absolute'. Typically, a layer is referred to as an 'AP div', where AP stands for Absolute Position.
An AP div is removed from the normal flow of the page. In other words, the AP div does not interact with other page elements that are in the normal flow of the page. It's as if the AP div is invisible to the other page elements.
Because of this, we need to be careful how we use a Layer (AP div). For instance, using Layers for the main Layout of your web page is not ideal. A layer will not center as easily as a static div, and even if you figure out how to center a layer, it causes other positioning headaches.
How to Use a Layer
Layers are ideal in situations where you want or need to overlap page elements.
Z-Index
Layers stack from top to bottom. We use the z-index to determine the stacking order of elements. The higher the z-index, the closer to the top an element will be in the stack.
How to Position a Layer
Besides altering the stacking order of layers, the real challenge with layers is positioning a layer in a layout.
Here's what I mean: You've made a layout mainly with static divs. But you decide to make your columns using layers. If you make a centered layout and then insert layers by clicking and dragging them into your layout, it will look nice in Design view, but when you view it in a browser, the columns are shifted to one side and not where you thought you put them.
This is because a layer, being absolutely positioned, is positioned relative to the far left edge of the page or browser, not relative to your div that you styled as the container.
Oh, but we can easily fix this!
Using Relative Positioning to create a New Point of Reference for a Layer
In order to position Layers relative to the #container div, set the Position Property of the #container to 'Relative'. Now your layers will be positioned relative to the #container div and not the edge of the page.
And, even if you intend to use layers for a few images you want to overlap, it is best to determine which containing block (div) is to be used as the point of reference when positioning these layers. This way you can be sure the layers will be positioned where you actually place them in Design view.
coming soon...... Video Tutorials
How to Stack Images Using Layers
I often check the keywords people use in the search engines to find Expression Web tutorials. One such keyword phrase was actually a question...so here is the answer.....
How do I stack images in Layers