Aprende posicionamiento CSS en 10 pasos

Este es un magnífico tutorial de BarelyFitz Design, en el que se explica mediante ejemplos gráficos muy prácticos, las diferentes propiedades disponibles en CSS para posicionamiento de capas: STATIC, POSITION: RELATIVE, POSITION: ABSOLUTE y FLOAT.

Esto es algo que vimos anteriormente, pero lo didáctico de este trabajo me ha hecho pensar que merecía la pena el montaje y traducción, así que ahí lo teneis.

1. POSITION:STATIC

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after

El posicionamiento por defecto para todos los elementos es STATIC, que hace que el elemento no se reposicione y ocupe su posición normal en el documentos, según el flujo del código.

Habitualmente no se debería especificar, a menos que necesites reponer la posición normal tras haber reubicado con otra propiedad.

#div-1 {
position:static;
}

2. POSITION:RELATIVE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si especificas POSITION:RELATIVE, entonces podrás usar TOP ó BOTTOM y LEFT ó RIGHT, para mover el elemento con respecto a la posición que debería ocupar normalmente en el documento.

Movamos el div-1 20 pixels abajo y 40 pixels a la izquierda:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

Date cuenta de que el espacio donde div-1 debería estar si no se hubiera movido, continúa en su sitio y ahora es un espacio vacío. El siguiente elemento (div-after) tampoco se mueve cuando desplazamos div-1. Eso es porque div-1 todavía ocupa ese espacio original en el documento, incluso después de haberlo movido.

Puede parecer que POSITION:RELATIVE no es muy útil, pero servirá para una tarea importante que veremos más adelante.

3. POSITION:ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Cuando especificas POSITION:ABSOLUTE, el elemento se "borra" del documento y se coloca exactamente dónde tu indicaste.

Movamos div-1a a la esquina superior derecha (busca arriba la capa roja):

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

En esta ocasión, cuando "borramos" div-1a, los otros elementos se reposicionan ocupando el hueco que se ha dejado: div-1b, div-1c, y div-after se mueven arriba porque div-1a ya no está allí.

Cómo pretendíamos, div-1a se ha ubicado en la esquina superior derecha. Esto es útil para colocar cualquier elemento directamente dónde queramos, pero hay que tener en cuenta que si no existen otros posicionamientos previos, el navegador lo colocará con respecto a la página.

Para colocar div-1a en una posición relativa a su contenedor (div-1) es para lo que necesitaremos la posición relativa.

Notas:

Hay un problema en IE: si especificas una anchura porcentual (como "width:50%"), entonces el ancho se basará en el elemento primario (padre), en lugar de en el elemento de posicionamiento.

4. POSITION:RELATIVE + POSITION:ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si fijamos posicionamiento relativo para div-1, cualquier elemento dentro de div-1 será posicionado relativamente a div-1. De esta manera, si fijamos una posición absoluta para div-1a, ahora lo podremos colocar arriba-derecha de div-1 y no de la página:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. Dos columnas con ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Ahora hemos construido un esquema de dos columnas, usando posicionamiento relativo y absoluto.

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Una ventaja de usar este tipo de posicionamiento, es que podemos colocar elementos en cualquier orden, en cualquier parte de la página, sin importar el orden en que aparecen en el código HTML. Así es cómo hemos puesto div-1b delante de div-1a.

Pero espera, ¿qué ocurre con los otros elementos? Han sido ocultados por los elementos con posición absoluta. ¿Qué podemos hacer para solucionarlo?

6. Dos columnas con ABSOLUTE + HEIGHT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Una solución es incorporar una altura fija a los elementos.

Sin embargo, esta no es una solución viable para la mayoría de diseños, porque normalmente no sabemos a priori cuanto texto va a contener la capa o el tamaño exacto de fuente que usaremos.

#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

7. FLOAT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Para columnas de alto variable, el posicionamiento absoluto no funciona bien, así que veamos otra solución.

Podemos hacer "flotar" un elemento para colocarlo tan lejos como sea posible a la derecha o a la izquierda y así hacer también que el texto lo rodee. Este sistema se usa habitualmente con imágenes, pero también se puede utilizar con otros elementos más complejos... sobre todo porque es la única herramienta que tenemos para ello!

#div-1a {
float:left;
width:200px;
}

8. Columnas con FLOAT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si hacemos flotar una columna a la izquierda y luego una segunda columna también a la izquierda, ambas se mostrarán juntas.

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

9. Columnas con FLOAT + CLEAR

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Después de ubicar elementos con FLOAT, podemos utilizar CLEAR para eliminar en los siguientes elementos ese efecto, de manera que se muestren como si no se hubiera indicado nada (STATIC)

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

10. Disclaimer & Recursos

Estos ejemplos son muy sencillos y no provocan la ira de los bugs CSS de IE (muchos).

La siguiente página fue muy valiosa:

Relatively Absolute

Cuando pases por aquí aprovecha para ver también:

Un artículo traducido por Oloman(Oloblogger)
Nota: El enlace original a la "página valiosa", actualmente no funciona.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL

Y muchos más artículos interesantes si nos sigues en...

5 comentarios :

Felipe Calvo Cepeda2/6/10, 3:25
Excelente aporte Oloman.
Bastante interesante el tutorial, ideal para empezar trabajos en Css, sobre todo esto del posicionamiento que a veces es dificil si no se tienen ciertos conceptos claros en el manejo de propiedades en Css.
Por cierto, que buen recutso el de las pestañas. :)
Un saludo cordial.
ResponderEliminar
Respuestas
CRNDXA2/6/10, 3:46
oye, no sabes como hacer un mapeado de imagenes pero que se abra en una nueva ventana?
ResponderEliminar
Respuestas
Oloman2/6/10, 19:11
Felipe, los conceptos de posicionamiento son fáciles, pero es complicado transmitirlos con claridad para que se asimilen bien. Me pareció un buen artículo y por eso pensé publicarlo.
Y sí... lo de las pestañas da mucho juego, pero te advierto que es farragoso montar un artículo como este para un post, ya que hay que tener mucho cuidado con situar y cerrar bien todas las etiquetas. No es difícil pero sí laborioso.

Big Bang, supongo que será suficiente con poner un target="_blank" dentro del código del enlace. Si no, no te queda más remedio que aplicar un base="_target" a todos los enlaces. Ver entrada sobre enlaces en ventana nueva.
ResponderEliminar
Respuestas
varices3/6/10, 14:54
Que bueno que publiquen todas estas cosas, estoy intentando hacer un sitio web de un emprendimiento que tengo proyectado, pero no tengo mucho dinero para pagarle a alguien que me haga el trabajo por lo que leo todo que puedo que tenga que ver con el tema.
ResponderEliminar
Respuestas
Anónimo22/6/10, 20:11
excelente aporte justo lo que buscaba deberia de haber mas webs como estas de chulas
ResponderEliminar
Respuestas

Añadir comentario

Oloblogger

Páginas

Oloblogger

2 de junio de 2010

Aprende posicionamiento CSS en 10 pasos

1. POSITION:STATIC

2. POSITION:RELATIVE

3. POSITION:ABSOLUTE

Notas:

4. POSITION:RELATIVE + POSITION:ABSOLUTE

5. Dos columnas con ABSOLUTE

6. Dos columnas con ABSOLUTE + HEIGHT

7. FLOAT

8. Columnas con FLOAT

9. Columnas con FLOAT + CLEAR

10. Disclaimer & Recursos

Compartir

5 comentarios :

Referencias