Z-index of an item is only applied to siblings

I would like to implement a popup that opens up when I click one area. It would work like the popup of a combo box. I already have it more or less working but I have two problems:

• I can use "z" to make it stay on top of other items from the same parent. However, items that are defined after the parent are displayed on top of the popup. For example:

Code:

---

Item {
    Item {
        x: 0; y: 0; width: 200; height: 200
        Popup {
            y: parent.bottom
            width: 200
            height: 150
            z: 1000
        }
    }
    Rectangle {
        x: 0; y: 0; width: 500; height: 200
        color: "red"
    }
}

---

The rectangle would be displayed on top of the popup even if the popup has z: 1000. Is there some way to fix it other than defining a big z index for all the ancestors of the popup?

• I would like the popup to disappear when I click anywhere outside of the popup, like a normal QWidget popup would do. I have tried using a huge MouseArea that covers the whole screen with a big z number but it has the same problem: it works for items that are defined earlier but it doesn't for items defined later.

---

Added after 1 41 minutes:

Ok, I made it! I reparent the popup to the top-level item. This way it always stays on top of other items and both issues get solved.

Code:

---

Component.onCompleted: {
		// Reparent the popup to the top-level item so that it always stays on top of all other items
		var topLevel = popup
		while(topLevel.parent) {
			topLevel = topLevel.parent
		}
		var coordinates = popup.mapToItem(topLevel, 0, 0)
		popup.parent = topLevel
		popup.x = coordinates.x
		popup.y = coordinates.y
	}

---