Cuando trabajamos con anclas a veces podemos encontrarnos problemas si entre los elementos de nuestro árbol HTML tenemos una capa con posición fixed.
Por ejemplo, si tenemos una barra de navegación con posición fixed y bajo ella distintas capas que forman el contenido, si introducimos un menú con anclas, puede que el resultado al desplazarnos con ellas no sea el deseado.
Cuando usamos un ancla que nos lleve al primer apartado, ese quedará cubierto por la barra de navegación en su parte superior.
Para solventar este problema, existen distintas técnicas. Nosotros vamos a mostrar una de ellas, basada en pseudo-selectores.
Si por ejemplo, tenemos una barra de navegación de una altura de 120px, nuestro código Css para resolver las anclas sería el siguiente:
.ancla:before {
display: block;
content: " "
margin-top: -120px;
height: 120px;
visibility: hidden;
}
Sobre cada una de las capas/secciones sobre las que tenemos contenido y que se identifican con las anclas, definimos el pseudo-selector before que simula la altura de la barra sobre cada una de ellas. Esto nos permite que al usar las anclas, el contenido no quede oculto bajo la barra.
Si queréis ver su funcionamiento, podéis verlo aquí Espero que os sirva de ayuda.