Stacking order and Z Index in Flex with negative coordinates

I was asked recently if you could move a child component in one container out of that container and above another container. You know what I said? “Easy” …just like time travel.

The cool thing about CSS in HTML is that you can specify negative values and the content will move to those values. So you can have a div with a image inside of the div and specify negative coordinates to move the image over and out of the div. You can do the same thing in Flex. Just like in HTML we need to keep the z index or stacking order of our content in mind.

We set the clipContent property of the Canvas container to false and we can move the child component anywhere we like. If we want our child component to be above other components and containers they must be ordered after other other containers in the MXML source code. The way the Flex framework works, the last item in the source code added to the display list is stacked above other items. Like a stack of paper, each mxml container is stacked in the order the are listed from top to bottom in the mxml source code. Just look at the example code. Try moving the first canvas code after the second canvas. See. See what happens. I told you it would do that. Why didnt you listen? You never listen to me anymore. All I do is cook and clean up after you. It’s all about you. All you think of is yourself.

< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	< mx:Canvas x="91" y="10" width="338" height="65" backgroundColor="#004080">
	
	
	
	< mx:Canvas x="91" y="74" width="200" height="200" backgroundColor="#FF0000" clipContent="false">
		< mx:Image x="21" y="-10" width="100" height="100">
			< mx:source>http://www.drumbeatinsight.com/images/dndTreeBox2.jpg< /mx:source>
		< /mx:Image>
	< /mx:Canvas>
	
< /mx:Application>

Content clipped and outside of canvas bounds (as shown in design view and browser):

Content not clipped and outside of canvas bounds (as shown in browser):

Update! Another method you can use to place the content above the chrome is to set the includeInLayout property to false of the child components. See the Icon Component aka Preloader Component for an implementation of this behavior.