QML ListView, How to make list elements to not overlap the header, when scrolling

Question

I have ListView with a header delegate enabled. I have a header positioning property set to "OverlayHeader". The header will stay in place when scrolling through the elements. However, the elements will overlap the header. Is there a way to prevent this.

Example of list elements overlapping the header.

import QtQuick 2.5

Rectangle {
    width: 360; height: 600

  ListView {

    width: 350; height: 200
    anchors.centerIn: parent
    id: myList
    model: myModel
    highlight: highlightBar
    clip: true

    snapMode: ListView.SnapToItem

    headerPositioning: ListView.OverlayHeader

    header: Rectangle {
      id: headerItem
      width: myList.width
      height:50

      color: "blue"

      Text {
        text: "HEADER"
        color: "red"
      }
    }

    delegate: Item {
      id: delegateItem
      width: 400; height: 20
      clip: true
      Text { text: name
      }

      MouseArea {
        id: mArea
        anchors.fill: parent
        onClicked: { myList.currentIndex = index; }
      }
    }

  }

  Component {
    id: highlightBar
    Rectangle {
      width: parent.width; height: 20
      color: "#FFFF88"
    }
  }

  ListModel {
      id: myModel
  }

  /* Fill the model with default values on startup */
  Component.onCompleted: {
      for(var i = 0; i < 100; i++) {
          myModel.append({ name: "Big Animal : " + i});
      }
  }
}

Answer 1

The header's default z value is 1, so you can set it to a higher value to ensure that it's over the delegates:

import QtQuick 2.5

Rectangle {
    width: 360
    height: 600

    ListView {

        width: 350
        height: 200
        anchors.centerIn: parent
        id: myList
        model: myModel
        highlight: highlightBar
        clip: true

        snapMode: ListView.SnapToItem

        headerPositioning: ListView.OverlayHeader

        header: Rectangle {
            id: headerItem
            width: myList.width
            height: 50
            z: 2

            color: "blue"

            Text {
                text: "HEADER"
                color: "red"
            }
        }

        delegate: Item {
            id: delegateItem
            width: 400
            height: 20
            Text {
                text: name
            }

            MouseArea {
                id: mArea
                anchors.fill: parent
                onClicked: {
                    myList.currentIndex = index
                }
            }
        }
    }

    Component {
        id: highlightBar
        Rectangle {
            width: parent.width
            height: 20
            color: "#FFFF88"
        }
    }

    ListModel {
        id: myModel
    }

    /* Fill the model with default values on startup */
    Component.onCompleted: {
        for (var i = 0; i < 100; i++) {
            myModel.append({
                name: "Big Animal : " + i
            })
        }
    }
}

Note that clipping view delegates is bad for performance.