[Solved]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:
@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: 500
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.
-
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.
@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
}@
-
Yes. Z order is local to the parent; that is, it only works among siblings. Look at z order as a series of numbers, instead of a single one. The z order of an item that is the grandchild of some other item would look something like this: 2.4.2. If another item has s z order number of 2.6, it would be above the first item no matter the last (local) z order number.
As you found out, parent to the top item if you must be sure to be on top globally.
