Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
The Mysteries of Z-Order
This page describes how objects are stacked on your web page, and how and why you might might change the order of that stacking. If one object is obscuring another, it is said to be "higher in the z-order".
You are probably familiar with the idea of an x-axis and a y-axis on web-pages or graphs:
The z-axis runs out in a third dimension from back to front -- like the pages in a closed book when you are looking at the front cover.
You are probably familiar with the idea of an x-axis and a y-axis on web-pages or graphs:
- The x-axis runs horizontally left to right
- The y-axis runs vertically top to bottom
The z-axis runs out in a third dimension from back to front -- like the pages in a closed book when you are looking at the front cover.
Why worry about z-order?
For simple pages, you needn't worry much about z-order. However there are three reasons why you should at least consider it:
For simple pages, you needn't worry much about z-order. However there are three reasons why you should at least consider it:
- Visibility -- make some objects appear in front of others
- Links -- ensure your links work with all browsers
- Load Order -- get a clean load with your page loading top to bottom
Visibility
If you have overlapping objects, the one behind is lower in the z-order than the one on top of it. Often it is obvious which is which. The behind object is partially hidden. If you have a behind object which really should be in front, you can control this from the 'Arrange' main menu item or back/front button set on the bottom toolbar. More on this below.
If you have overlapping objects, the one behind is lower in the z-order than the one on top of it. Often it is obvious which is which. The behind object is partially hidden. If you have a behind object which really should be in front, you can control this from the 'Arrange' main menu item or back/front button set on the bottom toolbar. More on this below.
Links
The z-order is not so obvious for transparent objects. When objects carry links, they must be in front. If not, you may find that although the links work in IE6, they won't in other browsers. Below are two links to a bookmark below. I deliberately made them separate text objects and placed placed them:
For the link to work, an object carrying a link must be in front of other objects that might otherwise lie on top of it. Take particular care with transparent objects as you are likely to not notice if they are in front of the object carrying the link.
The z-order is not so obvious for transparent objects. When objects carry links, they must be in front. If not, you may find that although the links work in IE6, they won't in other browsers. Below are two links to a bookmark below. I deliberately made them separate text objects and placed placed them:
- the one marked 'Behind' is behind the transparent background of the text object .
- the one marked 'In Front'' is in front of the text object.
For the link to work, an object carrying a link must be in front of other objects that might otherwise lie on top of it. Take particular care with transparent objects as you are likely to not notice if they are in front of the object carrying the link.
Load Order
You normally develop your pages from left to right, top to bottom. As you create each new object, each gets a z-order that reflects its order of creation. If you later replace or move objects, the z-order can become muddled.
The z-order controls the order in which objects are defined in the code.
This has implications when your visitor's browser loads the page. First the browser loads the html page itself. Then it reads the html code top to bottom, just as you would. As it does so, it requests any needed images, music files and the like from the server. Text objects, which don't need any extra files are still rendered (drawn) on screen in z-order.
Normally the browser sends several requests at once. The server breaks files into packets for transmission over the Internet. Because some packets take the fast route and others take the slow route, you can't guarantee which file will finish loading first. Big files will obviously take longer to load too. These factors mean that loading will be somewhat variable.
You normally develop your pages from left to right, top to bottom. As you create each new object, each gets a z-order that reflects its order of creation. If you later replace or move objects, the z-order can become muddled.
The z-order controls the order in which objects are defined in the code.
This has implications when your visitor's browser loads the page. First the browser loads the html page itself. Then it reads the html code top to bottom, just as you would. As it does so, it requests any needed images, music files and the like from the server. Text objects, which don't need any extra files are still rendered (drawn) on screen in z-order.
Normally the browser sends several requests at once. The server breaks files into packets for transmission over the Internet. Because some packets take the fast route and others take the slow route, you can't guarantee which file will finish loading first. Big files will obviously take longer to load too. These factors mean that loading will be somewhat variable.
Discover the z-order
The z-order of the objects on your page is listed in the drop-down object list that appears in the toolbar at the top of your workpage. The top object is z-order one. The rest of the objects follow in order below that. The bottom object might be z-order 100.
The list of objects that appears in the Quick Editor and the Object Editor is different. It seems to be a list of all the objects in your project, sorted by order of creation. The z-order has no effect on objects in these lists.
The z-order of the objects on your page is listed in the drop-down object list that appears in the toolbar at the top of your workpage. The top object is z-order one. The rest of the objects follow in order below that. The bottom object might be z-order 100.
The list of objects that appears in the Quick Editor and the Object Editor is different. It seems to be a list of all the objects in your project, sorted by order of creation. The z-order has no effect on objects in these lists.
Tab Key
Press the keyboard Tab key to move to the next object higher in the z-order. (Next object down the object list.)
Press Shift+Tab to move to the next object lower the z-order. (Next object up the object list.)
Press the keyboard Tab key to move to the next object higher in the z-order. (Next object down the object list.)
Press Shift+Tab to move to the next object lower the z-order. (Next object up the object list.)
Quick Editor open but inactive
With the Quick Editor window open but inactive, you can inspect each object in the Quick Editor as you tab forward or back. Or, as you click on the object. To open the Quick Editor and make it inactive, first open it (with eg ALT+Q) then click on your workpage to shift the focus off the Quick Editor. In this state the Quick Editor is not the active window and the title bar is the "inactive" color -- usually duller than the active window. Now it will remain on top of your workpage as you tab around.
With the Quick Editor window open but inactive, you can inspect each object in the Quick Editor as you tab forward or back. Or, as you click on the object. To open the Quick Editor and make it inactive, first open it (with eg ALT+Q) then click on your workpage to shift the focus off the Quick Editor. In this state the Quick Editor is not the active window and the title bar is the "inactive" color -- usually duller than the active window. Now it will remain on top of your workpage as you tab around.
Z-order in the html code
To view the html code:
To view the html code:
- click the top toolbar icon 'Toggle Code Window' (see image above); or
- with your previewed page open in your browser select View > Source then look in the early part of the body section.
<div id="Oobj172" style="position:absolute;z-index:1;visibility:visible;
This example shows the first object to load or be rendered on this page. It happens to be a text object, the page banner. By scrolling down the code, you will be able to see other objects lower down in the z-order.
How to change Z-order
With an object selected (click on it), control the z-order with the Arrange > Order menu item, or the forward and back buttons on the bottom toolbar.
With an object selected (click on it), control the z-order with the Arrange > Order menu item, or the forward and back buttons on the bottom toolbar.
Forward/back buttons on bottom toolbar
Arrange>Order menu item
There are 4 options:
- To Front -- move the object in front of all other objects. It becomes z-order 100 if there are 100 objects -- bottom of the page.
- Forward -- move the object one place forward in the z-order from where it is now. One nearer the bottom of the page
- Back -- move the object one place backwards in the z-order from where it is now. One nearer the top of the page
- To Back -- move the object behind all other objects. It becomes z-order 1 -- top of the page
Control the load order
As discussed above, the z-order largely determines the load order. Over time, pages get into a real jumble of z-orders. If that affects the loading, I suggest firstly open the Quick Editor and make it inactive. Then start at the top of your workpage, work your way along/down the objects in the load order you want. Click on each in turn and change the z-order to bring it to the front.
For groups of objects, I suggest ungroup first. Then regroup later. It is much harder to select an object that is part of a group. But not impossible if you are determined.
If you get only one object out of order, look at the object list and count the number of places by which it is wrong. Then make that number of forward or back moves in its z-order. Or you could guess, move, recheck and repeat as required -- the iterative approach
You can change the z-order of a locked object without unlocking it
You may need to make minor adjustments to make some objects appear on top of others.
I have done all these things on this page -- so you shouldn't see too much out of order.
This will result in each object starting to load or be rendered much more strictly top to bottom. When it finishes loading is another matter -- that depends on the size of the file and the delays on the Internet for that particular file.
As discussed above, the z-order largely determines the load order. Over time, pages get into a real jumble of z-orders. If that affects the loading, I suggest firstly open the Quick Editor and make it inactive. Then start at the top of your workpage, work your way along/down the objects in the load order you want. Click on each in turn and change the z-order to bring it to the front.
For groups of objects, I suggest ungroup first. Then regroup later. It is much harder to select an object that is part of a group. But not impossible if you are determined.
If you get only one object out of order, look at the object list and count the number of places by which it is wrong. Then make that number of forward or back moves in its z-order. Or you could guess, move, recheck and repeat as required -- the iterative approach
You can change the z-order of a locked object without unlocking it
You may need to make minor adjustments to make some objects appear on top of others.
I have done all these things on this page -- so you shouldn't see too much out of order.
This will result in each object starting to load or be rendered much more strictly top to bottom. When it finishes loading is another matter -- that depends on the size of the file and the delays on the Internet for that particular file.
Selecting hidden objects
If you have multiple objects on top of each other, you can select the top one just by clicking on it. To select the next object under (lower in the z-order), hold the Shift key down and click again with your mouse, Repeat as required
If you know the name of the hidden object, you can select it immediately by selecting its name from the drop-down object list box on the top toolbar of your workpage.
If you have multiple objects on top of each other, you can select the top one just by clicking on it. To select the next object under (lower in the z-order), hold the Shift key down and click again with your mouse, Repeat as required
If you know the name of the hidden object, you can select it immediately by selecting its name from the drop-down object list box on the top toolbar of your workpage.
navigation
navigation
navigation
But because it starts from the top of the page and works down, the browser starts loading images and files in the order in which it finds them in the code. The z-order. If your z-order is muddled, the image loading will be muddled.
Objects higher in the code (lower z-order) tend to load sooner. Objects you create last will load last -- not always what you want.
Objects higher in the code (lower z-order) tend to load sooner. Objects you create last will load last -- not always what you want.
Part of the object list for this page. In z-order, lowest at the top
Moving objects visually
It took me a while to discover that you can move objects a long way in the z-order while clicking and watching the effect on your workpage. When you change the z-order, the change appears immediately on your work page. So rather than count or guess, you can watch the effect as you click.
To make the effect more obvious, select a marker object which is already at the place in the z-order where you want the currently selected object to be. You may need to drag the current or marker object to a temporary location so that they ovelap. At the magic moment, the current object will appear or disappear from view as it moves in front of or behind the marker object.
If the objects are mostly transparent, like text, give one a background shade temporarily to make it obvious when it is in front or behind.
It took me a while to discover that you can move objects a long way in the z-order while clicking and watching the effect on your workpage. When you change the z-order, the change appears immediately on your work page. So rather than count or guess, you can watch the effect as you click.
To make the effect more obvious, select a marker object which is already at the place in the z-order where you want the currently selected object to be. You may need to drag the current or marker object to a temporary location so that they ovelap. At the magic moment, the current object will appear or disappear from view as it moves in front of or behind the marker object.
If the objects are mostly transparent, like text, give one a background shade temporarily to make it obvious when it is in front or behind.