How Does SMIL Handle Z-Index Layering?

Synchronized Multimedia Integration Language (SMIL) manages visual overlap primarily through layout region definitions, explicit z-index attributes, and document tree order. When multiple media elements occupy the same visual coordinate space, SMIL calculates spatial priority by evaluating stacking contexts defined in its layout module. Understanding these rules ensures that overlapping video, image, and text tracks render in the intended depth hierarchy without unexpected visual clipping or occlusion.

The SMIL Layout Model and Stacking Contexts

SMIL separates timing logic from visual presentation by using a dedicated <layout> section. Visual media elements reference predefined <region> tags within the <root-layout>.

When several visual elements play simultaneously and target overlapping regions, their stacking order is determined by the rendering properties assigned to those regions. SMIL creates distinct stacking contexts similar to CSS, isolating the depth layers of visual components according to their spatial hierarchy.

Explicit Layering with the z-index Attribute

SMIL provides direct control over visual stacking through the z-index attribute, which is applied directly to <region> elements or visual media references.

• Integer Values: The z-index property accepts signed integers. Regions with higher numerical values render on top of regions with lower numerical values.
• Default Values: When z-index is omitted or set to auto, the region defaults to a base layering level equivalent to 0.
• Negative Indices: Negative values place regions behind the default plane, rendering them underneath standard content unless obscured by the root background.

<layout>
  <root-layout width="800" height="600" background-color="black" />
  <region id="backgroundRegion" top="0" left="0" width="800" height="600" z-index="1" />
  <region id="videoRegion" top="50" left="50" width="700" height="500" z-index="2" />
  <region id="captionRegion" top="450" left="100" width="600" height="100" z-index="3" />
</layout>

In this structure, the captions explicitly render above the video, and the video renders above the background image, regardless of when each asset begins playing.

Stacking Resolution for Identical z-index Values

When two or more overlapping regions share the exact same z-index value, SMIL relies on the classic Painter’s Model:

1. Document Order Priority: The rendering engine parses layout declarations sequentially. Elements or regions declared later in the XML markup are painted over elements declared earlier.
2. Sibling Hierarchies: In nested region layouts (SMIL 3.0 Hierarchical Layout), child regions inherit the stacking context of their parent, with siblings competing based on local z-index or document appearance order.

Intra-Region Overlaps and Temporal Media

When multiple active media elements are assigned to the same region simultaneously:

• Document Structure Precedence: If media tags run in parallel inside a <par> container while pointing to an identical region, the element listed later in the timing body takes visual precedence.
• Temporal Activation: If elements start at different times within the same region, the newest activating stream typically draws over previous content unless specified otherwise by media transition rules or region reuse parameters.