Make child object be always on top

Question

I was wondering either the following functionality is available in QML: I need for a child object (a text here) to always stay on top of other object, no matter the child/ parent connection. Here is a MWE:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        id: rectMain;

        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Rectangle
        {
            id: rect1;

            width: 200;
            height: 200;

            x: 100;
            y: 100;

            color: "red";

            Text
            {
                id: theText;
                text: qsTr("text");

                anchors.centerIn: parent;
            }
        }

        Rectangle
        {
            id: rect2;

            width: 200;
            height: 200;

            x: 200;
            y: 200;

            color: "yellow";
        }
    }
}

It will show this window:

As you can see the "text" is covered with rec2, as it's a child of rect1, which was created prior to rect2. Is it possible for the text to be always on top of rect2 with current parent/ child connection?

Answer 1

This is the idea I expressed above. But I really can imagine for myself how that could be used. If you could define your real goals we will find another solution, of course.

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    width: 400
    height: 400
    visible: true
    title: "Example"

    Item {
        z: 1
        Repeater {
            id: rectGenerator
            property bool loaded: false
            Component.onCompleted: rectGenerator.loaded = true
            model: 10
            delegate: Rectangle {
                width: 100
                height: 100
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),0.8)
                x: Math.round(Math.random() * 300)
                y: Math.round(Math.random() * 300)
                Drag.active: dragArea.drag.active
                MouseArea {
                    id: dragArea
                    anchors.fill: parent
                    drag.target: parent
                }
            }
        }
    }

    Loader {
        z: 2
        sourceComponent: Repeater {
            model: rectGenerator.model
            delegate: Text {
                x: rectGenerator.itemAt(index).x
                y: rectGenerator.itemAt(index).y
                width: 100
                height: 100
                text: "item " + (index + 1)
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter                    
            }
        }
        active: rectGenerator.loaded
    }
}