Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

87
Visualizações
How does the Dev.to website wrap their post cards inside a link?

Example of a post card

I know they use an absolutely positioned link tag one level below the root element and sized it to fill the width and height of the card. But I can't figure out how you can still click on individual links without the full size link blocking it.

<article>
  <a id="full sized link"></a>
  <div id="actual content">
    <h3>
      <a id="individual link">TITLE</a>
    </h3>
  </div>
</article>

Here is roughly how the cards are structured.

I think them may be using JavaScript to redirect you.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Try the anchor tag you want to target to set

 <a id="full-sized-link" href='#' ></a>

#full-sized-link{
    height: 100%;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 1;
    }
    
    article{
    position:relative;
    }

And on individual links higher z-index

#individual-link{
    position: relative;
    z-index: 2;
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda