title: QML ListView, How to make list elements to not overlap the header, when scrolling
body: <p>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. </p>
  
  <p>Example of list elements overlapping the header.</p>
  
  <p><img src="https://i.stack.imgur.com/PegFT.png" alt=""></p>
  
  <pre><code>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 &lt; 100; i++) {
            myModel.append({ name: "Big Animal : " + i});
        }
    }
  }
  </code></pre>