The linearized reading order of this page is as follows:
1. the top banner
2. the side menu
3. the main content
4. the extra information
5. the copyright information
Here is the code:
<div id="Layer1" style="position:absolute; left:10px;
top:17px; width:593px; height:90px; z-index:1; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000;">
This is the top banner of on the Web page, with the company logo,
etc.
</div>
<div id="Layer2" style="position:absolute; left:14px;
top:118px; width:149px; height:310px; z-index:2; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;">
This is the side menu, with links to other areas of the site
</div>
<div id="Layer3" style="position:absolute; left:186px;
top:116px; width:278px; height:305px; z-index:3; background-color: #CCCCFF;
layer-background-color: #CCCCFF; border: 1px none #000000;">
This is the main content area of the Web page
</div>
<div id="Layer4" style="position:absolute; left:477px;
top:116px; width:124px; height:186px; z-index:4; background-color: #CCFF99;
layer-background-color: #CCFF99; border: 1px none #000000;">
This is some extra information that is not central to the content
of this page.
</div>
<div id="Layer5" style="position:absolute; left:14px;
top:439px; width:592px; height:46px; z-index:5; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000;">
This is the copyright information and a few miscellaneous items.
</div>