Absolutamente sí

11/may/2007 12

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:

SafariFirefoxInternet Explorer 7OperaCaminoInternet Explorer 6
  • 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&iacute;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.

Ver ejemplo

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;
     }

Ver ejemplo relativo

Links:

Comentarios

  1. fearlex [#]

    Muy bueno, la verdad, esto aclara, explica y enseña un conocido dolor de cabeza para muchos, soy fiel asiduo lector de CSS LAB y lastime que no postees mas a menudo, todos tus post son excelentes, y aprovecho este post para decirlo.

    Salu2

  2. CSSLab Admin [#]

    me halaga fearlex, lamentablemente el tiempo q tengo no es mucho para desarrolar mas articulos aqui, peoro hago lo q puedo. tratare de estar mas seguido metido aqui. Saludos.

  3. fearlex [#]

    Me pasa lo mismo, soy desarrollador web y paso el dia entero, metido en trabajo, luego cuando llego a casa, a duras penas tengo tiempo de hacer nada, mas o menos un post de linux o algo de eso, a veces quiero postear tambien cosas basicas, de CSS, XHTML, accesibilidad, usabilidad, actionscript pero no encuentro el tiempo ni el tema indicado, se como es, pero bueno, soy lector, y una sugerencia que SI me gustaria darte es que lograras conseguir el dominio csslab.com, esta disponible, y eso daria mas a conocer este sitio y los excelente post que creas sobre css, ademas evitarias que alguien se aprovechara de las visitas que has logrado, yo hoy me di cuenta que tu dominio es cl (chile) no com, y facil facil, cuando hubiera tratado de entrar a tu sitio directamente, no a travez de feeds como realmente lo hago, si hubiera puesto csslab.com, me hubiera encontrado con otra cosa. Es solo un consejo para mejorar, de veras me gusta tu sitio, el LOOk es great. Saludos

  4. Federico [#]

    Tengo una pregunta, es lo mismo poner position:absolute que position:relative?, por que acabo de probar cambiar relative por absolute y funciona igual.

    Saludos, y me encanta el blog.

  5. Sasha Himmler [#]

    Siempre creí que se puede centrar un elemento horizontalmente -independientemente de la resolución de la pantalla- por medio de tablas (bueno, basta con una)

    La preguntra es ¿se puede hacer lo mismo con CSS?, por ejemplo colocar una imagen que esté siempre al centro de la pantalla.

    Saludos

  6. CSSLab Admin [#]

    pued facil sasha, ya escribi un articulo sobre como centrar horizontalmente. suerte.

  7. Sasha Himmler [#]

    Sorry, me refería centrarlo horizontal y verticalmente.
    Gracias

  8. » ImageMap: mapeando imágenes en el siglo XX | CSSLab [#]

    […] sólo cuando posamos el mouse sobre <dt>. La idea es que a través de posicionamiento absoluto, definimos las diferentes zonas que queremos que contengan la información auxiliar y con […]

  9. » Pronto… | CSSLab [#]

    […] Absolutamente sí […]

  10. CSSLab » Reproduciendo Parallax [#]

    […] la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del […]

  11. Efecto Parallax en el fondo de una web » Cosas sencillas [#]

    […] si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del […]

  12. CSSLab - Cómo superar IE6-IE7-IE8 (y no morir en el intento) [#]

    […] hasta que lo pruebas en IE6. Deberías conocer -y prevenir- que IE6 tiene problemas posicionando relative/absolute/fixed, con el modelo de caja, doble margen a elementos flotados, utilizando z-index, soportando canal […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab