Fix ancora html con header fixed

Nell’articolo di oggi la risoluzione a un problema talvolta molto fastidioso, ovvero usare un ancora html con header fixed.

Il problema nasce dal fatto che l’header fixed “esce” dal flusso html proprio a seguito della sua proprietà fixed. Pertanto per fare in modo che l’ancora appaia correttamente senza che il menu la sovrasti dovremo andare a impostare un apposito spazio di offset uguale all’altezza del menu.

Per risolvere il problema usiamo questo css:

/*Fix ancora con header fixed*/
#test {
  position: relative;
  height: 20px;
}

#test a {
  position: absolute;
  left: 0px;
  top: -60px;
}

#test .target-label {
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0;
}

Ecco invece l’html:

<a href="#target">Ancora Target</a>

<div id="test">
  <a name="target">&nbsp;</a>
  <h2 class="target-label">Targetweb</h2>
</div>

Se questa pillola html/css ti è stata utile condividila con i tuoi colleghi o nei social che preferisci!

Image credits “css” disponibile su Shutterstock!