Cómo colocar cada caja en su sitio I

En realidad esto es cómo un puzle en 3D, unas cajas dentro de otras, controlando los tamaños, rellenos y márgenes entre unas y otras controlamos todo un documento HTML. Cómo es cada elemento y dónde se posiciona en la página en relación con los demás.

Normalmente a la hora hacer un diseño con CSS lo primero que nos planteamos, es cómo va a ser nuestra página, para ver cuántas zonas queremos. ….

En nuestro caso, vamos a hacer un diseño a tres columnas con encabezado y pie, por dos razones:

Es la estructura básica más común.
Si sabes hacer eso, sabes hacer cualquier cosa con CSS

Cómo dentro de la estructura básica, vamos a colocar otros elementos, vamos a crear nuestra estructura creando DIVS, los divs son contenedores dentro de los cuales podemos poner nuestros elementos. Si venís de diseñar con tablas, a mí me ha ayudado a centrarme el pensar en un DIV como si fuera una celda de una tabla, sólo que en este caso, puedo colocar cada celda aislada dónde a mí me de la gana.

COMO SE POSICIONA UN ELEMENTO

Los DIVs son nuestras cajas. Y Tenemos que aprender a colocarlas en la página. Lo primero que vamos a ver es que hay dos formas principales de colocar (posicionar) las cajas en el documento.

Lo que hacemos es decirle al div: cólocate a 3cm del techo y a dos de la izquierda, pero ¿respecto a qué tiene que colocarse el div? Pues en principio respecto al elemento dónde está metido.

Esto es cómo un eje de coordenadas

Image

Podemos colocar las cajas respecto al la parte superior, la parte izquierda o la parte derecha. Nuestras tres cajas estarían:

Verde:

top: 0px;
left: 0px;

Amarilla:

left: 100px;
top: 50px;

Azul:

Top: 0px;
Right: 0px;

Ahora que ya hemos visto nuestras coordenadas. Vemos como lo hacemos en CSS, Hay dos formas de hacerlo principales, de manera absoluta o de manera relativa.

La terminología escogida no ha sido muy afortunada, porque lleva a confusión, habla de posicionamiento relativo y absoluto cuando en realidad, la forma de colocar las cajas nunca es absoluta, sino que siempre está en función de las demás cajas.

Nuestra primera caja dentro de la cual vamos a meter todas las demás, es el BODY. Así que cualquier elemento que coloquemos dentro del BODY ya estará metido dentro de una caja cuyo tamaño y posición nos van a afectar.

Podemos colocar las cosas de dos maneras:

En relación a la caja en la que lo metemos: posicionamiento absoluto.

En relación a dónde hubiera caído si no estuviera dentro de una caja. Vamos “dónde caiga” y es a este dónde caiga que luego le decimos que 3 cm a la derecha o la izquierda.

Hay otros dos valores que se utilizan mucho menos

Static
Fixed, este último no lo soporta internet explorer en ninguna de sus versiones, por lo que no se utiliza.

Cómo todo esto es un poco complicado vamos a ver ejemplos que es lo mejor.

POSICIONAMIENTO ABSOLUTO

Para posicionar un elemento de forma absoluta utilizamos la propiedad:

Position: absolute;

De esta manera le decimos al navegador que coloque nuestra caja respecto de la caja que lo contiene. En nuestro caso, el elemento BODY.

Nuestro CSS sería así:

body { background-color: black;}

div {
position:absolute;
left: 0px;
top: 0px;
background-color: green;
width: 200px;
}

No necesitamos hack, porque no establecemos márgenes ni nada, así que no lo ponemos.

Tu html sería

<body>
<div>
Soy una caja verde y estoy pegada a mi  padre el elemento body Nuestras dos cajas empiezan en el mismo sitio pero yo soy más pequeña y ocupo menos espacio. Pero tapo un trocito de mi padre, que es una caja negra.
</div>
</body>

podéis ver el ejemplo aquí: http://www.tomatoma.ws/archivos/ejcss/ejposicion1.html

Cómo nosotros tenemos que colocar 3 cajas de colores, cada en su sitio, tenemos que decirle al navegador cual es cual, porque si se encuentra con varios DIVS iguales los colocará todos en el mismo sitio y eso no nos interesa. Así que primero vamos a crearnos 3 DIVS que vamos identificar con un ID, tal y cómo vimos en los selectores: http://www.tomatoma.ws/articulo.php?resultpage=1&topic_id=380&forum_id=28

Nuestro html quedaría así:

<body>
<div id="caja1">
Soy una caja verde y estoy pegada a mi  padre el elemento body Nuestras dos cajas empiezan en el mismo sitio pero yo soy más pequeña y ocupo menos espacio. Pero tapo un trocito de mi padre, que es una caja negra.
</div>
<div id="caja2">
Soy una caja amarilla y estoy a 75 píxeles del techo y al 125píxeles de la izquierda. También tapo un trocito de mi padre. Mis códenadas 0,0 están
</div>
<div id="caja3">
Soy una caja azul  y estoy pegada a mi  padre, pero esta vez a la derecha.
</div>
</body>

Y ahora vamos a colocarlas cada una en su sitio:

Los selectores de ID se seleccionaban con el símbolo # y el nombre: #caja1 pero nosotros queremos que asocie además al elemento div así que vamos a utilizaar

body { background-color: black;
}

div#caja1 {
position:absolute;
left: 0px;
top: 0px;
background-color: green;
width: 200px;}

div#caja2 {
position:absolute;
left: 350px;
top: 150px;
background-color: #FFCC33;
width: 200px;}

div#caja3 {
position:absolute;
right: 0px;
top: 0px;
background-color: blue;
width: 200px;}

Si lo pruebas te encontrarás con algo como esto: http://www.tomatoma.ws/archivos/ejcss/ejposicion2.html

Vale hasta ahora hemos trabajado con cajas aisladas, ahora vamos a trabajar con una caja metida dentro de otra a ver qué ocurre. Esta vez dentro de nuestro div vamos a meter elementos:

<div id="caja1">

Soy una caja verde y estoy pegada a mi  padre el elemento body .
<em>Yo soy un elemento EM </em>Nuestras dos cajas empiezan en el mismo sitio pero yo soy más pequeña y ocupo menos espacio. Pero tapo un trocito de mi padre, que es una caja negra.
</div>

Para distinguir bien nuestras cajas unas de otras, les vamos a poner colorines de fondo distintos:

div#caja1 {
position:absolute;
left: 100px;
top: 100px;
background-color: green;
}

em {
background-color: #FFCC66;

}

Con este código veríamos algo así: http://www.tomatoma.ws/archivos/ejcss/ejposicion3.html

Ahora vamos a colocar este segundo elemento, el em, que si recordamos también es una caja. Vamos allá,

em {
position: absolute;
top: 0px;
left: 0px;
background-color: #FFCC66;

}

Si probamos este código se vería así: http://www.tomatoma.ws/archivos/ejcss/ejposicion4.html

Cómo podéis ver, nuestro EM no se ha colocado pegado al borde del documento, como pasaba en el ejemplo anterior, sino que se ha colocado respecto al borde de la caja.

Vamos a moverla un poco: 5 píxeles abajo y 20 a la izquierda:

em {
position: absolute;
top: 5px;
left: 10px;
background-color: #FFCC66;}

Si probamos este código se vería así: http://www.tomatoma.ws/archivos/ejcss/ejposicion5.html

Ahora vamos a colocarla utilizando un valor negativo en lado izquierdo para ver como se sale de su caja padre

em {
position: absolute;
top: 5px;
left: -10px;
background-color: #FFCC66;}

Si probamos este código se vería así: http://www.tomatoma.ws/archivos/ejcss/ejposicion6.html

POSICIONAMIENTO RELATIVO

Hemos dicho antes que posicionar los elementos de forma relativa es posicionarlos respecto a cómo hubieran “caido” si no los hubierámos posicionado. Esto la única manera de verlo, es con ejemplos.

Primero vamos a recordar, que pasa con nuestra segunda caja, si no la ponemos en ningún sitio tal como hicimos con el em el punto anterior http://www.tomatoma.ws/archivos/ejcss/ejposicion3.html

En el ejemplo5 posicionabamos absolutamente nuestro em http://www.tomatoma.ws/archivos/ejcss/ejposicion5.html

Veamos ahora qué pasa si le aplicamos exactamente los mismos valores pero le aplicamos un posicionamiento relativo:

em {
position: relative;
top: 5px;
left: 10px;
background-color: #FFCC66;}

El resultado es este:
http://www.tomatoma.ws/archivos/ejcss/ejposicion7.html

Cómo ves, la posición del em, en el ejemplo 5 y en el 7 son completamente diferentes. ¿porqué? Porque esta vez no se coloca respecto al div, sino que se coloca respecto a donde hubiera estado posicionado si no le hubieramos aplicado ningún estilo, es decir, respecto a la posición que tenía en el ejercicio 3. Ayuda cargarlos consecutivamente en el navegador e irlos viendo seguidos con la tecla adelante y detrás del navegador.

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s