Posiciones relativas dentro de un div. Interacciones extrañas

Estoy tratando de replicar una pregunta de Udacity en html. la pregunta inicial es aquí. (*)

Mi ejemplo es aquí. Como puede ver (**), el único problema son las posiciones de los botones de opción (***). He visto las posiciones usando gimp y traté de usarlas en el html. Sin embargo, no solo hay un desplazamiento (que es perfectamente manejable en sí mismo) sino que este desplazamiento también varía de un botón a otro. Peor aún: parece haber algún tipo de interacción: quitar algunos botones hace que el resto se acerque más a donde debería estar.

Yo (supongo) que podría adivinar posiciones hasta que lo hiciera bien, pero como probablemente lo haré muchas veces, prefiero entender mejor el problema. Qué está pasando ? ¿Hay una mejor manera de lograr el mismo resultado?

(*) Ya me han dado la sugerencia de mirar la fuente, y lo intenté, sin mucho éxito
(**) Abrí el archivo en firefox 14 y chromium 18
(***) estaban destinados a estar en el norte, oeste, este y en el cuadrado justo debajo del oeste

preguntado el 28 de julio de 12 a las 03:07

1 Respuestas

El posicionamiento relativo no es lo que quieres. Relativo significa desplazar el elemento de su posición nominal, pero luego tratarlo como si estuviera en su posición original con respecto a cómo afecta a los elementos subsiguientes en el flujo.

Lo que realmente quieres es un posicionamiento absoluto. Primero, debe aplicar un posicionamiento relativo o absoluto al contenedor (el gráfico div), y luego cualquier posicionamiento absoluto que aplique a los contenidos será con respecto a ese contenedor.

Esta terminología es un poco confusa, por supuesto, ya que las posiciones absolutas son en realidad relativas a un contenedor.

Respondido 28 Jul 12, 03:07

Gracias, eso funcionó como un encanto. Ahora... ¿Por qué debo aplicar posicionamiento relativo o absoluto al gráfico div? - josinalvo

Las posiciones absolutas siempre son relativas al padre más cercano que tiene aplicado el posicionamiento absoluto o relativo; de lo contrario, son relativas al <html> elemento. - steve jorgensen

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