Unidad 13. Posicionamiento. Flexbox. Grid (VI)



13.6. Posicionamiento sticky

El posicionamiento sticky, como decíamos al principio de la unidad, es una mezcla entre posición relativa y fija.

Inicialmente el elemento ocupa una posición relativa pero cuando se hace scroll, en lugar de desplazarse y quedar oculto, queda fijo y visible en la parte que indiquemos de la pantalla.

Para colocar el elemento en la posición deseada diponemos de las propiedade top, botton, right y left. Si no usamos una de estas propiedades no tendrá efecto la propiedad sticky.

Normalmente se suele utilizar para que el menú superior permanezca siempre visible en la parte superior, para ello usaremos la propiedad top para que no quede muy pegado al borde superior.

Por ejemplo con top: 5px; quedará a 5 px. de la parte superior.

Para verlo hemos aplicando position: sticky; top: 5px; al encabezado de este punto, observa como al hacer scroll y desplazar la página, el encabezado no desaparece y queda "fijo" en la parte superior.

Si queremos que un elemento quede anclado en la parte inferior de la página utilizaremos position: sticky; bottom: 5px;.

Podemos usar ambos posicionamientos sticky (top y bottom) a la vez para diferentes elementos.

Para ver mejor el efecto vamos a añadir unos parrafos de texto "lorem ipsum"

lorem ipsum

lorem ipsum

lorem ipsum

Por ejemplo, el párrafo en color azul que viene a continuación tiene position: sticky; bottom: 5px;.

Fijado al pie


Enero-2019 (V 2.0)
Pág. 13.6
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.