Why is the GeckoFX Web Browser always on top? How do I tell it to respect the hierarchy?

Question

Summary of what I intend to do:

I have a grid called VideoContainerGrid which gets filled with a GeckoFX Web Browser through the view model. It's navigating towards an embedded YouTube video. What I wanted to do was show a grid with a few buttons as tools (i.e. for speeding up the video, etc) if the RootGrid receives a MouseOver.

The Problem:

For some reason, the GeckoFX Web Browser is staying on top of everything I put over it, even if the grid that I want to show on top is higher than grid that houses the browser.

Simplified Code: (I've already handled the MouseOver events and just simplified the code below for clarity)

<Grid x:Name="RootGrid">
    <Grid x:Name="VideoContainerGrid"/>
    <Grid x:Name="GridIWantToShowOnTop"/>
</Grid>

Another solution I tried: (Applying the Z index explicitly)

<Grid x:Name="RootGrid">
    <Grid x:Name="VideoContainerGrid"   Panel.ZIndex="1"    />
    <Grid x:Name="GridIWantToShowOnTop" Panel.ZIndex="9999" />
</Grid>