Anchoring element's centers to the top of another element/ Overlaying elements

[abanksdev]

Hi there,

Can someone point in the right direction to achieve overlaying two QML elements as depicted in the picture below?

The purple item needs to be centered right at the top of the pink item through some method. Please advise!

[Diracsbracket]

@abanksdev

    Rectangle {
        id: rect1
        y: 200
        height: 100
        width: 500
        color: "pink"
    }

    Rectangle {
        anchors.horizontalCenter: rect1.horizontalCenter
        anchors.verticalCenter: rect1.top
        height: 100
        width: 100
        color: "purple"
    }

Or, if you meant:

    Rectangle {
        anchors.horizontalCenter: rect1.horizontalCenter
        anchors.bottom: rect1.top
        height: 100
        width: 100
        color: "purple"
    }