Elements can be positioned on a page in three dimensions: along the X and Y axes, and also along the Z axis. The z-index property specifies the stack level of an element. Elements with greater stack levels will be placed with elements with lesser stack levels.
Elements can be positioned on a page in three dimensions: along the X and Y axes, and also along the Z axis. The z-index property specifies the stack level of an element. Elements with greater stack levels will be placed with elements with lesser stack levels.
Please refer to http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index for further information.
The z-index property specifies the stack level of an element. The value of the property must be given as an integer, or needs to be set to 'auto'. The integer defines the stack level of the selected element. Elements may have negative stack levels. The default value of 'auto' means that the stack level of the element should be the same as the stack level of its parent.
Please note that the z-index property only works on elements that have the position property set to 'absolute', 'relative' or 'fixed'.
Support for the position, top, right, bottom, left and z-index properties is represented by the following feature:
mcs:style.Positioning
If any of the properties listed previously are not supported by the targeted device, then the feature is not supported.
The following example illustrates the use of the z-index property. In the first case, the stack level of the search bar is greater than the stack level of the text, and therefore the text will be overlaid with the search bar. In the second case, the stack level of the search bar is smaller than the stack level of the text, and therefore the search bar will be overlaid with the text.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:sel="http://www.w3.org/2004/06/diselect">
<head>
<title>Overlays</title>
<style type="text/css">
body {
position: relative;
}
.warning{
color: red;
padding: 4px;
}
#search-overlaying {
position: absolute;
right: 1px;
top: 60px;
z-index: 2;
background: gray;
}
#search-overlaid {
position: absolute;
right: 1px;
top: 110px;
z-index: 2;
background: gray;
}
#overlaid {
position: absolute;
right: 50px;
top: 70px;
z-index: 1;
color: red;
}
#not-overlaid {
position: absolute;
right: 50px;
top: 120px;
z-index: 3;
color: red;
}
</style>
<mcs:script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
var c = e.style.display;
if (c == 'block') {
c = 'none';
} else {
c = 'block';
}
e.style.display = c;
}
</mcs:script>
</head>
<body>
<sel:select>
<sel:when expr="mcs:feature('mcs:style.Positioning')">
<div id="overlaid">This text will be overlaid by the search bar</div>
<div id="search-overlaying">
<a href="javascript:toggle('overlaying-search-bar')">
<object src="/images/magnifying-glass.mimg"/>
</a>
<ui:box id="overlaying-search-bar" style="display:none"> ...Search Bar... </ui:box>
</div>
<div id="not-overlaid">This text will not be overlaid by the search bar</div>
<div id="search-overlaid">
<a href="javascript:toggle('overlaid-search-bar')">
<object src="/images/magnifying-glass.mimg"/>
</a>
<ui:box id="overlaid-search-bar" style="display:none"> ...Search Bar... </ui:box>
</div>
</sel:when>
<sel:otherwise>
<div class="warning"> Overlays syntax is not supported </div>
</sel:otherwise>
</sel:select>
</body>
</html>