Highlight Rectangle is being placed behind List Element after the screen limit is reached

Question

In my screen, I can see around 5 list element out of 11.
I'm Using Up/Down Arrow Keys to move the Highlight Rectangle(Border Rectangle).
Highlight rectangle will be displayed above list element only for first 5 list elements.
Once it reaches the 6th element the rectangle will be displayed behind the list element even if the Z index is 1 and it never comes above list element again.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
Window {
    visible: true
    width: Screen.width
    height: Screen.height
    id: rootWindow
    ListModel {
        id: contact
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }

    }

    ListView{
        clip: true
        z: -1
        id: lst
        width: Screen.width
              height: Screen.height
        anchors.centerIn: rootWindow
        x: rootWindow.width *.05
        spacing: 20
        y: subrect.height + subrect.y+ 100
        model: contact
        delegate:
            RowLayout{
            id: idx
            anchors.topMargin: 5
            spacing: -5
            Rectangle{
                width: 30
                height:100
                color: "#3399ff"
                radius: 5
            }
            Rectangle{
                id: segment
                width: lst.width
                height: 100
                color: "white";
                layer.enabled: true
                layer.effect: DropShadow{
                    transparentBorder: true
                    horizontalOffset: 3
                    verticalOffset: 3
                    color: "#e1dede"
                }
                RowLayout {
                    Rectangle{
                        id: inner
                        width: 300
                        height: 50
                        color: "transparent"
                        Text {
                            x:  50
                            y: inner.height /3
                            text: "Name : " + name
                            font.pixelSize: 30
                            anchors.verticalCenter: inner
                        }
                        Column{
                            y: inner.height /3

                            Text {
                                color: "grey"
                                x: lst.width * .8
                                text: "Contact "
                                font.pixelSize: 20

                            }
                            Text {
                                color: "grey"
                                font.pixelSize: 20
                                x: lst.width * .8
                                text: number
                            }
                        }
                    }
                }
            }
        }
        focus: true
        highlight: Rectangle { color: "transparent"; z:1;radius: 8; border.width: 3; border.color: "black" }
    }
}

Thank You

Answer 1

The stacking order of the Listview happens as below.

So to get your highlighter on the top change z: 2 that should work. Here is the complete description of the Listview stacking order doc. And remove the z-order of your listview's instance.