0

Uitlicé este script para hacer un timeline vertical, pero el problema es que como la sección del menú del timeline tiene un position:fixed, se ajusta a la ventana en vez de al contenedor padre, y entonces queda por encima de la portada de la página (ya que la timeline y el contenido de la misma está en un contenedor que aparece después de la portada de la página). ¿Alguna ayuda sobre cómo puedo corregir esto para que la timeline no se salga del lugar?

Este es el código en codepen: https://codepen.io/lebedevdesigns/pen/KQZYjo

2
  • fixed siempre va ajustado relativo a la ventana, absolute va ajustado al primer ancestro relative, absolute, fixed o ventana. el 10 may. 2018 a las 0:48
  • Hola Matìas Fernandez, bienvenido a Stack Overflow en español. Te sugiero revisar Cómo preguntar. Lo mas importante es que agregues que has intentado y en que estás fallando dentro de la respuesta, si el código se puede ejecutar en navegador puedes utilizar un Stack Snippet y así si el link deja de funcionar pueda ser de utilidad para los usuario en el futuro
    – user22721
    el 10 may. 2018 a las 2:18

1 respuesta 1

1

Para colocar un elemento fixed en relación con un elemento parent, lo que necesitas es position:absolute en el elemento secundario y cualquier modo de posición que no sea el predeterminado o estático en su elemento primario.

Por ejemplo:

#padre { position:relative; }
#hijo { position:absolute; left:50px; top:20px; }

Esto colocará el elemento hijo 50 píxeles a la izquierda y 20 píxeles abajo de la posición del padre.

Para colocar un elemento fixed en relación con la ventana, lo que necesitas es position:fixed, y puedes usar top:, left:, right: y bottom: para posicionar dentro de la ventana.

Por ejemplo:

#cuadro { position:fixed; bottom:40px; right:40px; }

Esto posicionará #cuadro fijo en relación con la ventana del navegador web, 40 píxeles desde el borde inferior y 40 píxeles desde el borde derecho.

P.D. Cambiando a step: 42 en const TIMELINE_VALUES se aprecia mejor el 'codepen'.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.