Usar posiciones absolutas para ubicar un elemento de manera precisa en una página web es uno de los métodos más cómodos porque requiere propiedades que cualquier navegador entiende y nos evita agregar márgenes, paddings y flotaciones que siempre perturban ya que afectan al resto de las etiquetas.
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo
top:0; right:0; es el ángulo superior derecho
bottom:0; left:0; es el ángulo inferior izquierdo
bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo
top:0; right:0; es el ángulo superior derecho
bottom:0; left:0; es el ángulo inferior izquierdo
bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
<body>
.......
<div>
<div>
<div>
<img src="URL_IMAGEN" />
</div>
</div>
</div>
.......
</body>
Por defecto, se vería algo así:
Si agregáramos position:absolute a la etiqueta IMG ¿dónde se vería?
<img src="URL_IMAGEN" style="position: absolute; right: 0; top: 0;" />
Eso no depende de las propiedades de la imagen sino de las propiedades de su contenedor ya que es este el que define cuáles son los "límites" del rectángulo, cuáles son las coordenadas 0:0 y lo elemental es que definamos eso agregándole a ese contenedor, la propiedad position:relative.
Si el primer DIV tiene esa propiedad, se verá así:
Si el primer DIV tiene esa propiedad, se verá así:
position:relative
Y si el segundo DIV tiene esa propiedad, se verá así:
position:relative
Y si el tercer DIV tiene esa propiedad, se verá así:
position:relative
Los valores de top, right, bottom y left también pueden ser negativos y eso, hará que el elemento se "salga" de su contenedor:
<img src="URL_IMAGEN" style="position: absolute; right: 0; top: -50px;" />
position:relative
Pero ... siempre hay un pero, no se verá o se verá parcialmente si los contenedores tienen agregada la propiedad overflow:hidden:
No hay comentarios:
Publicar un comentario