Important: Please read the Qt Code of Conduct -

[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.

Log in to reply