title: QML: Show object over non siblings
body: <p>I have a somehow very hard to solve problem in my QML code. I will summarize it the best I can since it is very long code..</p>
  <p>I write a color picker qml file that is called when the user wants to pick a color. This is done in a big rectangle with little rectangles in it evenly distributed that have flat colors to choose from.</p>
  <p>I have a parent rectangle, 1 outer repeater and nested in this repeater is another inner repeater that creates little rectangle in a row. The outer repeater places the inner repeaters under another so it fills the rectangle with little rectangles fully, preferably with different colors.</p>
  <p>Every little rectangle also has a function that highlights itself with an animation. This animation is a circle that gets bigger than the rectangle itself. This is done so when the user clicks a color from e.g. a color history on the right, it should highlight the corresponding colors rectangle if is there.</p>
  <p><strong>Now, the problem</strong>:
  No matter what z values I use, this animation won't show above the other rectangles. It will get blocked by neighboring rectangles. I have researched and it seems that z values don't account for non siblings, just for all items in a single parent.</p>
  <p>Here's some code that leaves out all the unnecessary junk.
  To note is that every rectangle has its own animation and mousearea.</p>
  <pre><code>import QtQuick 2.12
  import QtQuick.Window 2.12
  
  Window {
      visible: true
      color: 'black'
      width: 640
      height: 480
      title: qsTr(&quot;Hello World&quot;)
  
      Rectangle {
      id: parentRectangle
  
      width: 400
      height: 400
  
      property int numberOfBoxesInARow: 5
      property int numberOfBoxesInAColumn: 5
  
         Repeater {
            id: outerRepeater
  
            model: parentRectangle.numberOfBoxesInARow
  
            Repeater {
               id: innerRepeater
               model: parentRectangle.numberOfBoxesInAColumn
  
               y: parentRectangle.height / parentRectangle.numberOfBoxesInAColumn * outerIndex
               x: 0
  
               height: parent.height / parentRectangle.numberOfBoxesInAColumn
               width: parent.width
  
               property int outerIndex: index
  
               Rectangle {
                  id: individualRectangle
                  color: Qt.rgba(1 / (outerIndex + 1), 0, 1 / (index + 1), 1)
  
                  x: parentRectangle.width / parentRectangle.numberOfBoxesInARow * index
                  y: outerIndex * parentRectangle.height / parentRectangle.numberOfBoxesInAColumn
  
                  width: parentRectangle.width / parentRectangle.numberOfBoxesInARow
                  height: parent.height / parentRectangle.numberOfBoxesInAColumn
  
                  Component.onCompleted: {
                      console.log(&quot;Rectangle at &quot; + outerIndex + &quot;|&quot; + index + &quot; created, width / height: &quot; + width.toFixed(2) + &quot;| &quot; + height.toFixed(2))
                  }
  
                  MouseArea {
                     anchors.fill: parent
                     onClicked: {
                        highlightAnimation.running = true
                     }
                  }
  
                  Rectangle {
  
                     id: highlightCircle
  
                     visible: highlightAnimation.running
  
                     color: 'white'
  
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
                     property real size: 0
                     width: size
                     height: size
                     radius: size/2
                  }
  
                  PropertyAnimation {
                     id: highlightAnimation
                     target: highlightCircle
                     property: 'size'
                     from: 200
                     to: 0
                     duration: 500
                  }
               }
            }
         }
      }
  }
  </code></pre>