34,333
edits
Changes
→Using overlying Layers
[[Image:Javascript layers 1.jpg]]
We will now use the ''z-index'' property to control which layer appears on top. The ''z-index'' property contains a numerical value which specifies the postion of the layer relative to the browser (which is considered to be layer 0). The higher the z-index setting for a layer, the closer to the top of overlapping layers it will appear. For example to get our ''layer1'' layer to appear above ''layer2'' in the abobe xample we would need to set the z-index property of ''layer1'' to 2. The following extends our example to include z-index values for each layer. In this case we will make sure that layer1 has a higher value than layer2 so that layer1 appears on top of layer 2:
<pre>
<style type="text/css">
#layer1 {
background-color: yellow;
position: absolute;
height:90px;
width:90px;
left:0px;
top:100px;
z-index: 2;
}
#layer2 {
background-color: red;
position: absolute;
height:90px;
width:90px;
left:10px;
top:100px;
z-index: 1;
}
</style>
<p id="layer1">This is layer 1</p>
<p id="layer2">This is layer 2</p>
</pre>
