The SMIL Tutorial - Layout

z-index

To be sure 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>

Source - See it running in SOJA

What SMIL do :

Region 1 is over Region 2