Xamarin.Forms - position element on top of another.

I've got a page in my Xamarin.Forms project that I need to look something like this:

I can position the red and blue boxes, no problem. But I can't figure out how to create the green one.

The XAML I use is the following:

<StackLayout HorizontalOptions="FillAndExpand">
    <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">   
         //I'm thinking the green box should be positioned absolutely in here or something?         
    </StackLayout>
    <StackLayout VerticalOptions="End" BackgroundColor="Blue">
        <Grid VerticalOptions="EndAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Text="Button" HorizontalOptions="FillAndExpand" BorderRadius="0" VerticalOptions="EndAndExpand" HeightRequest="50" TextColor="White" BackgroundColor="#85C034"></Button>
        </Grid>
    </StackLayout>
</StackLayout>