Congelar a segunda coluna

Consegui congelar a segunda coluna veja: https://prnt.sc/119tvxj Porém estou com um problema, é que a coluna congelada fica por cima do cabeçalho, como faço para que o cabeçalho fique por cima dela? Código usado no CSS:

div {
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
}

table {
  position: relative;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

thead th:first-child {
  left: 0;
  z-index: -1;
}

tbody td:nth-child(2){
  left: 0;
  z-index: 1;
}

tbody td:nth-child(2){
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

td:nth-child(2){
  color: DeepPink;
}

Observação: estou usando o link acima, mudei somente o css, agradeço qualquer ajuda.

Pode deixar, já consegui.

div { max-width: 40em; max-height: 20em; overflow: scroll; position: relative; }

table { position: relative; border-collapse: collapse; }

td, th { padding: 0.25em; }

thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; background: #000; color: #FFF; }

thead th:first-child { left: 0; z-index: 2; }

thead th:nth-child(2) { left: 0; z-index: 2; }

tbody td:nth-child(2){ position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; background: #fff; border-right: 1px solid #CCC; z-index: 1;

}

td:nth-child(2){ color: DeepPink; background: #FFF; }

O código usado foi este. =)

Fala ai Shellen, tudo bem? Muito bom, parabéns pela solução.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.