title: Swift: Header of UICollectionViewController overlaps cells
body: <p>I have a <code>UICollectionViewController</code> and want to add a custom header. </p>
  
  <p>I checked <code>Section Header</code> in the Interface Builder within my CollectionViewController and implemented in my subclass of it the <code>viewForSupplementaryElementOfKind</code> function.</p>
  
  <pre><code>override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -&gt; UICollectionReusableView {
  
      switch kind {
  
      case UICollectionElementKindSectionHeader:
  
          let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "myHeaderIdentifier", for: indexPath)
  
          // !! NOT WORKING PROPERLY
          // sectionHeader overlaps other cells
  
          headerView.backgroundColor = UIColor(hue: 0.9, saturation: 1.0, brightness: 0.9, alpha: 1.0)
          headerView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 250.0)
  
          return headerView
  
      default:
          assert(false, "Unexpected element kind")
      }
  
  }
  </code></pre>
  
  <p>The changes take effect, but the header (the pink area in the screenshot below) now overlaps the regular cells within the collectionView.</p>
  
  <p><a href="https://i.stack.imgur.com/37RWx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/37RWx.png" alt="enter image description here"></a> </p>
  
  <p>What am I doing wrong? 
  Appreciate any help!</p>