Agregue texto en la parte superior de una página sin que el resto de la página se empuje hacia abajo

Esta debería ser una respuesta simple. Simplemente no tengo los conocimientos suficientes en CSS para saber qué buscar para solucionar esto.

Mi empleador quiere que agregue enlaces Saltar al contenido en todas las páginas de nuestro sitio web, ya que tiene una discapacidad visual y mejoraría mucho la accesibilidad.

Quiero implementar el método descrito aquí: http://webaim.org/techniques/skipnav/#focus

Mi problema es que cuando los enlaces se enfocan, el resto del diseño de la página se desplaza unos pocos píxeles hacia abajo debido a que el texto aparece repentinamente. Quiero que el texto se muestre en la parte superior de la página sin que afecte el diseño debajo. ¿Puedo arreglar la posición de mi diseño de alguna manera?

Todo el diseño ya está envuelto con un contenedor div, por lo que supongo que solo sería cuestión de agregar una propiedad CSS a ese contenedor que arreglará su posición.

Gracias de antemano.

preguntado el 12 de junio de 12 a las 16:06

1 Respuestas

Debería poder hacer esto posicionando absolutamente el enlace:

#skip a:active, #skip a:focus
{
position:absolute;
top: 0px; 
width:100%;
height:auto;
text-align: center;
}

Los elementos absolutamente posicionados se eliminan del flujo normal. El documento y otros elementos se comportan como si el elemento absolutamente posicionado no existiera, por lo que esto agregará el enlace justo en la parte superior de la página, pero no debería hacer que el resto de los elementos de la página se muevan.

Respondido el 12 de junio de 12 a las 17:06

Gracias, esto parece solucionarlo, pero no me permite centrar el enlace en la parte superior ahora que es absoluto. ¿Hay alguna manera de hacer que la posición vertical sea absoluta pero la posición horizontal relativa, es decir, centrada? - maxfantasma

Desafortunadamente, los métodos normales para centrar un elemento no funcionarán para elementos posicionados absolutamente. Lo más fácil en este caso probablemente sería hacerlo en todo el ancho de la página y luego centrar el texto. He actualizado mi respuesta para hacer eso, ¡espero que ayude! - John Lawrence

Podría arrojar un índice z de 999 al CSS anterior: Ryan B

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.