Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved]Z-index of an item is only applied to siblings
Forum Updated to NodeBB v4.3 + New Features

[Solved]Z-index of an item is only applied to siblings

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 5.2k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Y Offline
    Y Offline
    YetAnotherNick
    wrote on last edited by
    #1

    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.
    1 Reply Last reply
    0
    • Y Offline
      Y Offline
      YetAnotherNick
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • A Offline
        A Offline
        andre
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved