Posición Absoluta
CSS permite diferentes maneras de posicionar un elemento, como los anteriormente vistos de margin, padding, text-align, float, etc. y otro es la posición absoluta.
La posición absoluta nos permite desprender de las propiedades de inline/block a nuestro elementos y colocarlos en la posición que nosotros queramos.
Aunque no es recomendable para establecer la vista de una página, generalmente se emplea esta propiedad junto con JS par realizar una determinada animación o movimiento de un determinado elemento.
Veamos un ejemplo con el siguiente código HTML y CSS.
<!DOCTYPE HTML><html lang = "es"><head><title>absolute.html</title><meta charset = "UTF-8" /><style>#bug {position: absolute;left: 100px;top: 50px;}</style></head><body><h1>Absolute Positioning Example</h1><p>Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br /></p><p id = "bug"><img src = "img/bug.gif" alt = "bug picture" /></p></body></html>
Esta página contiene un párrafo ordinario y otro párrafo para la imagen para el cual necesita una carpeta en el directorio de su archivo llamada img con una imagen con extensión (.gif) llamada bug.
Si no colocásemos estilos a nuestra página solo vería un párrafo y una imagen en el inferior, sin embargo al aplicar los estilos, los cuales se encuentran en azul, y le damos el atributo de absolute a la propiedad position , la imagen se sitúa en la posición que nosotros especificamos sin importar los demás elementos.
Con el ejemplo anterior lo que veremos será:
No hay comentarios:
Publicar un comentario