Setting z-index upon a panel?

Question

Hi,
I am making a custom color picker component. Simply, when the user clicks a color box, color palettet should pops up over all other components.
This is my color palette panel:
        <s:Panel width="111" height="215" id="colorPalette"
                 y="18"
                 backgroundColor="0x333333"
                 visible="false"
                 includeInLayout="false"
                 skinClass="com.storefront.image_module.uicomponents.HeaderlessPanelSkin"
                >
            <s:layout>
                <s:TileLayout paddingTop="5" paddingLeft="5" />
            </s:layout>
        </s:Panel>
But everytime I set it's visible=true , it goes unerneath of other components. To fix this problem, I tried several ways I can think of but none of them worked.
What is the best way to make the panel appear over all other components? Im looking for something similar to "z-index" in css

Answer 1

Thanks for the reply. But temporary reparenting doesn't sound the perfect solution to me as this custom component is to be used by other developers as well.
Is there any other existing popup component that I can use instead of panel?