Concept of dreamweaver mx middle layer

Dreamweave is a good web page creation software, and web pages are also graphic design, just like photoshop and fireworks. This makes our software have such a concept, just like the concept of layers in the above software, you can create layers on the page. However, this limit is relatively large, and all the things are made in a rectangle.

Next we will add a layer, insert-> layout object-> layer, so we will add a corresponding Layer. Let's take a look at its code.

<Div id = "Layer1" style = "position: absolute; width: 250px; height: 181px; z-index: 1; left: 59px; top: 51px;">
<P> <a href = http://blog.111cn.net/overmind> overmind </a> </p>
<P> sdfasdfsafsadfsad <br>
Sdfdadasdfdsfasdfasdfasdf </p>
</Div>

This is a layer. A simple position and size are set. z-index: 1 indicates the z-axis position of the layer. By accessing the id, you can use js to operate the action of a layer.

The color of the layer is transparent by default. If it is changed to background-color: # FFFFFF, the things on the layer are invisible and are blocked by White.

Experiments show that the larger the Z axis value, the higher the level.

<Div id = "Layer1" style = "position: absolute; width: 250px; height: 181px; z-index: 1; left: 165px; top: 124px; background-color: # FFFFFF ">
<P> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<P> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </p>
</Div>

<Div id = "Layer2" style = "position: absolute; width: 250px; height: 181px; z-index: 2; left: 236px; top: 142px; background-color: # FFFFFF ">
<P> ccccccccccccccccccccccccccccccccccccccc </p>
<P> ddddddddddddddddddddddddddddddddddddddddd </p>
</Div>

The z-index of the body should be 0 by default.</