UWP - Understanding RelativePanel elements position

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <RelativePanel Background="AliceBlue" Padding="50">
        <Rectangle
            x:Name="Red"
            Fill="Red" 
            Width="50" 
            Height="50"
            RelativePanel.AlignHorizontalCenterWithPanel="True"
            RelativePanel.AlignVerticalCenterWithPanel="True"
            />
        <Rectangle
            x:Name="Green"
            Fill="Green"
            Width="50"
            Height="50"
            RelativePanel.Above="Red"
            RelativePanel.AlignLeftWith="Red"
            />
        <Rectangle
            x:Name="Yellow"
            Fill="Yellow"
            Width="50"
            Height="50"
            RelativePanel.Below="Red"
            RelativePanel.AlignLeftWith="Red"
            />
        <Rectangle
            x:Name="Blue"
            Fill="Blue"
            Width="50"
            Height="50"
            RelativePanel.LeftOf="Red"
            RelativePanel.AlignBottomWith="Red"
            />
        <Rectangle
            x:Name="Olive"
            Fill="Olive"
            Width="50"
            Height="50"
            RelativePanel.RightOf="Red"
            RelativePanel.AlignBottomWith="Red"
            />
        <Rectangle
            x:Name="Orchid"
            Fill="Orchid"
            Width="50"
            Height="50"
            RelativePanel.Above="Green"
            RelativePanel.LeftOf="Green"
            />
        <Rectangle
            x:Name="Orange"
            Fill="Orange"
            Width="50"
            Height="50"
            RelativePanel.Below="Olive"
            RelativePanel.RightOf="Olive"
            />
        <Rectangle
            x:Name="Black"
            Fill="Black"
            Width="50"
            Height="50"
            RelativePanel.AlignTopWithPanel="True"
            />
        <Rectangle
            x:Name="DodgerBlue"
            Fill="DodgerBlue"
            Width="50"
            Height="50"
            RelativePanel.AlignTopWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"
            />
        <Rectangle
            x:Name="SeaGreen"
            Fill="SeaGreen"
            Width="50"
            Height="50"
            RelativePanel.AlignBottomWithPanel="True"
            RelativePanel.AlignLeftWithPanel="True"
            />
        <Rectangle
            x:Name="Navy"
            Fill="Navy"
            Width="50"
            Height="50"
            RelativePanel.AlignBottomWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"
            />
    </RelativePanel>
</Page>