title: Horizontal UICollectionViewCompositionalLayout displaying section headers over item cells
body: <p>I am attempting to use UICollectionViewCompositionalLayout to create this design:</p>
  
  <p><a href="https://i.stack.imgur.com/dipmal.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dipmal.png" alt="UICollectionViewCompositionalLayout desired layout"></a></p>
  
  <p>The intention here is for the collection view to scroll horizontally, with the items also scrolling vertically when they overflow using NSCollectionLayoutSection's <code>orthogonalScrollingBehavior</code> property.</p>
  
  <p>This is the layout I have right now:</p>
  
  <pre><code>private lazy var collectionViewLayout: UICollectionViewLayout = {
      let sectionWidth: CGFloat = 256.0
  
      let layoutItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(50.0))
      let layoutItem = NSCollectionLayoutItem(layoutSize: layoutItemSize)
  
      let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(sectionWidth), heightDimension: .fractionalHeight(1.0))
      let layoutGroup = NSCollectionLayoutGroup.vertical(layoutSize: layoutGroupSize, subitems: [layoutItem])
      layoutGroup.interItemSpacing = .fixed(8.0)
  
      let layoutSectionHeaderItemSize = NSCollectionLayoutSize(widthDimension: .absolute(sectionWidth), heightDimension: .absolute(150.0))
      let layoutSectionHeaderItem = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: layoutSectionHeaderItemSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
  
      let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
      layoutSection.contentInsets = NSDirectionalEdgeInsets(top: 24.0, leading: 24.0, bottom: 24.0, trailing: 24.0)
      layoutSection.boundarySupplementaryItems = [layoutSectionHeaderItem]
      layoutSection.interGroupSpacing = 8.0
  
      let layoutConfiguration = UICollectionViewCompositionalLayoutConfiguration()
      layoutConfiguration.scrollDirection = .horizontal
      layoutConfiguration.interSectionSpacing = 16.0
  
      return UICollectionViewCompositionalLayout(section: layoutSection, configuration: layoutConfiguration)
  }()
  </code></pre>
  
  <p>The result is:</p>
  
  <p><a href="https://i.stack.imgur.com/x9izdl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x9izdl.png" alt="UICollectionViewCompositionalLayout actual layout"></a></p>
  
  <p>Any ideas as to where I'm going wrong?</p>