Aprende posicionamiento CSS en 10 pasos – Register – Habitaciones

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.

CosasParaMiBlogs

miércoles, 2 de junio de 2010

Aprende posicionamiento CSS en 10 pasos – Register – Habitaciones – Promotional Code

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

Popular Posts

Blogger news

Labels

Blog Archive