在某种情况下我们会需要实现如下应用情景：有两个图片或者是控件重叠，然后当我们的鼠标滑过或者是点击的时候某一个图片或控件时，被触发的图片或者会显示在顶层，以免被被遮住。
一般情况下，MXML和HTML,都是默认按照代码出现的先后顺序来排列控件的层次的，问题是我们一般会在运行的时候动态变换图片或控件的层次的，这样就不能依靠代码出现的先后顺序了，HTML是通过CSS样式的z-index来控制，但是在Flex里好像没有相对应的属性或者是方法来控制控件的层次先后关系。
不过我们可以自己手工用代码实现。
我们先来看一些类的继承关系：
Application
LayoutContainer
Container
UIComponent
而Container，UIComponent 都实现了IChildList接口管理容器中子项的方法。
所以可以通过IChildList定义的setChildIndex和numChildren属性来实现控件的层次排列关系。
演示代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function mouseOverHandler(event:MouseEvent):void{
this.setChildIndex(event.currentTarget as DisplayObject,this.numChildren-1);
}
]]>
</mx:Script>
<mx:Image mouseOver="mouseOverHandler(event)" x="42.85" y="40.6" source="images/cupgreen.png"/>
<mx:Image mouseOver="mouseOverHandler(event)" x="132.8" y="93.2" source="images/cupempty.png"/>
<mx:DateChooser mouseOver="mouseOverHandler(event)" x="456.6" y="118.6" />
<mx:DateChooser mouseOver="mouseOverHandler(event)" x="370.4" y="142.3"/>
</mx:Application>
