Z-index

From Frontal Wiki

Purpose

This style determines the display order of sibling elements. An element is displayed in front of any sibling with a numerically lesser z-index.

Value

The z-index style accepts positive and negative numbers. The default value is 0.

z-index: 0;

Remarks

When sibling elements have the same z-index values, which is true by default, then the order of the elements in the Frontal document determines their display order; elements defined earlier are below those defined later.

Note that z-index only affects the display order of sibling elements, i.e., those that share the same parent. Where an element appears relative to non-sibling elements depends on the z-indexes of those elements' ancestors that are siblings. This is a characteristic of Frontal mapping its element hierarchy to the Flash display object hierarchy.

Example

In this example, no z-index values are specified:

<include rel="assets" blocking="true" src="assets.swf" fontClasses="SwiftLTStd, SwiftLTStdBold, SwiftLTStdItalic" />
<style><![CDATA[
    text, video
    {
        font-family: Swift LT Std;
        font-size: 40;
	margin: auto;
        top: 0px;
        width: auto;
    }
]]></style>
 
<text><![CDATA[Hidden Text]]></text>
<video src="http://www.frontalcode.com/assets/video/video_1.flv"/>

As expected, the video covers the text because it appears after the text in the Frontal document.

Here is the same example with z-index specified:

<style><![CDATA[
video, text
    {
	margin: auto;
        top: 0px;
        width: auto;
    }
    text
    {
        font-family: Swift LT Std;
        color: white;
        font-size: 40px;
        z-index: 10;
    }
]]></style>
<include rel="assets" blocking="true" src="assets.swf" fontClasses="SwiftLTStd, SwiftLTStdBold, SwiftLTStdItalic" />
<text><![CDATA[Roll Over Me!]]></text>
<video src="http://www.frontalcode.com/assets/video/video_1.flv" style="z-index: 5;"/>

Now the text appears in front of the video because it has a higher z-index value (10) than the video (5).

Can Be Applied To

This style can be applied to any visual element:

• div
• img
• text
• video
• form
• input