Absolutamente sí
Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana.
La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos:
- Static: es por defecto en las etiquetas. Un elemento con position: static; siempre tiene la posición normal con que fluye a diagramación de la página.
- Relative: un elemento con position: relative; se mueve con respecto a su posición normal. Al definirlo, podemos posicionarlo top: 20px; respecto a su posición actual.
- Absolute: una etiqueta con position: absolute; es posicionado respectivamente a su contenedor bloque, sea éste el DIV padre, o el BODY. Su posición también es especificada por top, right, bottom, left.
- Fixed: un elemento con position: fixed; queda fijo respectivo a la ventana del browser, no importanto el movimiento de éste o del scroll que produzca. Obedece también a top, right, bottom y left.
¿Se fijaron que para position no se ocupa margin-top, o margin-left? Sólo para que lo tengan en cuenta. Ahora, tal como quedó plasmado en el título de este artículo, en este caso mencionaré específicamente la propriedad position: absolute. Esta propiedad es muy útil si quieres ubicar elementos por sobre otros, no importando donde éstos estén ubicados. En esta ocasión, 2 ejemplos gráficos. Comenzaremos con el HTML base que regirá ambos ejemplos:
<div id="contenido">
<h1>Título</h1>
<p>Lorem ipsum dolor sit amet,…….</p>
<p>Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend. Phasellus eros. Praesent ac diam….</p>
<img src="csslab.gif" />
</div>
Nada de otro mundo. Un contenedor que tiene un título, y dos párrafos de texto en sus respectivas etiquetas, para finalmente mostrar una imagen. Ahora, a través del CSS, esta página se verá un poco mejor estéticamente. La idea como mencioné es mostrar a través de 2 ejemplos las combinaciones que permiten posicionar en este caso a la imagen respecto a la ventana del browser, y a su etiqueta contenedora.
#contenido {
width: 450px;
float: left;
}
#contenido h1 {
text-align: center;
color: #F00;
}
#contenido p {
padding: 10px 10px 10px 15px;
font-size: 12px;
line-height: 140%;
}
#contenido img {
position: absolute;
width: 230px;
height: 100px;
top: 0;
right: 0;
}
Como se habrá notado, sólo se definió en la etiqueta IMG que ésta estuviera posicionada absolutamente, arriba y a la derecha (top: 0; right: 0;). Con esto, verán que la imagen estará ubicada en la parte superior derecha de nuestra ventana de browser, y se moverá respecto a su resolución.
Ahora, agregaremos un position: relative al contenedor. Con esto, verán que la imagen nuevamente estará posicionada sobre nuestros elementos, pero en esta ocasión respecto a su contenedor bloque. Con esta propiedad declarada, definimos que div#contenido es su elemento bloque contenedor, y por lo tanto que sujete a IMG dentro de sí.
#contenido {
width: 450px;
float: left;
position: relative;
}
#contenido h1 {
text-align: center;
color: #F00;
}
#contenido p {
padding: 10px 10px 10px 15px;
font-size: 12px;
line-height: 140%;
}
#contenido img {
position: absolute;
width: 230px;
height: 100px;
top: 0;
right: 0;
}
Links:
