z-index in iWeb
iWeb Layers and z-index
Navigation Layer
z-index = 0
Header Layer
z-index = 10
Content Layer
z-index = 5
Footer Layer
z-index = 15
Objects in layers with higher
z-index will cover objects in layers with lower z-index.
Layers in iWeb will never cover each other.
Object in Content Layer is below Header Layer, but covers a part of the Navigation Layer and an object in the Content layer
Object in Content Layer is below Header Layer
Nav Layer
Header Layer
Content Layer
Footer Layer
Object in Nav Layer will not cover other layers
Objects in a layer all have a z-index of 1.
The position of a <div> element in the source of the webpage determines its position relative to other objects.
Following the diagram above the two objects in the Content layer will show as (some attributes omitted) :
-
<div id="id1" style="height: 50px; position: absolute; top: -25px; width: 200px; z-index: 1;">
Small object
</div>
<div id="id2" style="height: 150px; position: absolute; top: -100px; width: 200px; z-index: 1;" >
Large object (the one at the top which covers the small object)
</div>
When you re-arrange the objects in iWeb, moving the large object behind the small one, the code will be :
-
<div id="id1" style="height: 150px; position: absolute; top: -100px; width: 200px; z-index: 1;">
Large object (the one at the top which covers the small object)
</div>
<div id="id2" style="height: 50px; position: absolute; top: -25px; width: 200px; z-index: 1;">
Small object
</div>
The most common problem usually occurs when objects in the Header or Content layer cover the links in the Navigation layer.
To find out where the objects are, do Command-A (Select all) and notice the handles of each object.
To avoid any conflict, keep objects within the bounderies of the layer they belong to.
More information about z-index
Useful tip to add an object behind the menu.
Do Command-Shift-L to display the page layout.
Drag the object in the navigation layer. Notice that the area highlights.
Release the mouse.
Move the object to the back (Command-Shift-B).
Use the arrow keys to nudge the image back into its former position or change the numbers in the Inspector.