Make child object be always on top - qt

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
}
}