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"> </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!
