スティッキーナビゲーションバー：z-indexを設定した後はコンテンツをクリックできません

yahoo / sticky-nodeのサードパーティライブラリを使用してスティッキーナビゲーションバーを実装しました。最初は私のコードが機能せず、製品のリストを含むコンテンツがナビゲーションバーと重なっています。製品のz-indexを-1に設定した後、ナビゲーションバーが製品と重なります。しかし、詳細ページにリンクしている商品画像をクリックすることはできなくなりました。

この問題の解決策はありますか？

const Header = () => {
  const backgroundImage = useHeaderBackgroundQuery()
  const headerText = useHeaderTextQuery()
  const cartIcon = useCartQuery()
  return (
    <div class="shadow-sm mb-5" style={{ width: "100%"}}>
      <Img fluid={backgroundImage} style={{ minHeight: "60px" }} />
      <div
        class="d-flex"
        style={{
          position: "absolute",
          top: "0",
          height: "100%",
          width: "100%",
        }}
      >
        <div class="p-2">
        <Link to="/">
            <Img fixed={headerText} />
          </Link>
        </div>
        <div class="ml-auto p-2">
          <Link to="/cart">
            <Img fixed={cartIcon} />
          </Link>
        </div>
      </div>
    </div>
  )
}


const Products = ({ data }) => {
  console.log("products")
  console.log(data.allShopifyProduct)
  return (
    <div class="container">
      <div class="row">
        {data.allShopifyProduct.edges.map(({ node }) => (
          <div class="col-md-4" style={{zIndex: "-1"}}>
            <Link to={`/product/${node.handle}`}>
              <Img
                fluid={node.images[0].localFile.childImageSharp.fluid}
                style={{ maxHeight: "350px", maxWidth: "350px" }}
              />
            </Link>
            <div>
              <h5 class="text-center" style={{marginTop: "8px"}}>{node.title}</h5>
              <hr class="mt-2 mb-2" style={{width: "50%", backgroundColor: "black"}}/>
              <p class="text-center font-weight-bold" style={{marginBottom: "20px"}}>
                €{node.priceRange.minVariantPrice.amount}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}


const ProductsPage = ({ data }) => {
  console.log(data)
  return (
    <div>
      <Sticky>
        <Header />
      </Sticky>
      <Products data={data} />
    </div>
  )
}