Overlaying Regions

Next: Support for Other Media Up: Positioning Media Previous: Relative Position Example

Overlaying Regions

We have just seen how to position a media along x and y axes (left and top).

What if two regions overlap?

Which one should be displayed on top ?

The following code points out the problem:

<smil>
 <head>
  <layout>
   <root-layout width="300" height="200" background-color="white" />
   <region id="region_1" left="50" top="50" width="150" height="125" />
   <region id="region_2" left="25" top="25" width="100" height="100" />
  </layout>
 </head>
 <body>
  <par>
   <text src="text1.txt" region="region_1" />
   <text src="text2.txt" region="region_2" />
  </par>
 </body>
</smil>

To ensure that one region is over the other, add z-index attribute to <region>.

When two region overlay:

the one with the greater z-index is on top.
If both regions have the same z-index, the first rendered one is below the other.

In the following code, we add z-index to region_1 and region_2:

<smil>
 <head>
  <layout>
   <root-layout width="300" height="200" background-color="white" />
   <region id="region_1" left="50" top="50" width="150" 
           height="125" z-index="2"/>
   <region id="region_2" left="25" top="25" width="100" 
           height="100" z-index="1"/>
  </layout>
 </head>
 <body>
  <par>
   <text src="text1.txt" region="region_1" />
   <text src="text2.txt" region="region_2" />
  </par>
 </body>
</smil>

Dave Marshall
10/4/2001