Box-model & display (repaso)

Box-model

Area de contenido | Padding | Border | Margin

.box {
    width: 300px;
    height: 50px;
    border: 5px solid #d8cd00;
    margin: 50px;
    padding: 50px;
}
        

Display: block

• Ocupan 100% del contenedor.

Display: inline-block

• Mantienen el flujo del texto como los elementos inline pero interpretan el box-model como un elemento block

Display: none

El valor none en la propiedad display removerá por completo el elemento de nuestra página web. Los elementos que le sigan en el HTML ocuparán su lugar en el flow del documento.

clearfix

Cuando los elementos block de la página no utilizan float para crear layouts se visualizan así:

div { float: none; }

Un problema que suele presentarse cuando utilizamos float para crear layouts es que al remover todos los elementos en un contenedor del flow natural el contenedor se queda vacío y su altura pasa a ser 0.

div { float: left; }

Este problema puede pasar desapercibido si el contenedor no tiene background ni border, pero puede afectar a los elementos que estén ubicados a continuación.

Hay varios técnicas para solucionar este problema. Este conjunto de técnicas se suelen conocer con el nombre de clearfix, y aunque todas se agrupen bajo el mismo nombre sulen diferir mucho unas de otras.

Hay que tener en cuenta que la propiedad float nunca fue diseñada para ser usada como una herramienta de layout por lo que tanto el echo de utilizarla para componer páginas, como las distintas técnicas para solucionar los problemas asociados, no dejan de ser hacks y cada uno acarrea un serie de ventajas e inconvenientes que hay que considerar a la hora de utilizarlos.

Clear: both;

Una técnica sencilla para solucionar el problema es colocar dentro del contenedor, a continuación de los elementos flotados, un elemento con la propiedad clear: both

Overflow: auto;

Otra posible solución, es recurrir a la propiedad overflow.

Cualquier valor diferente a visible nos corregirá el problema

div { overflow: auto; }

Clase .Clearfix

Hay otras técnicas más avanzadas y estables de clearfix que combinan varias propiedades. Es una buena idea contar en el css con una class .clearfix de ayuda para poder utilizar cuando tengamos que lidiar con el problema.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Contenedor con clase .clearfix

<div class="clearfix">
    <div class="float-box">1</div>
    <div class="float-box">2</div>
    <div class="float-box">3</div>
</div>
        

Position

Además de los floats, los márgenes y otras propiedades de layout, CSS proporciona la posibilidad de posicionar elementos de manera precisa mediante coordenadas.

Posicionaremos un elemento a partir de su esquina superior izquierda, utilizando las propiedades top, right, bottom y left (TRBL).

La dificultad consiste en determinar cual será el punto de orígen (0,0) de esas cordenadas y allí es donde entra la propiedad position.

Position static

La propiedad position admite cuatro valores: static, relative, absolute y fixed.

static es el valor por defecto y simplemente ignora cualquier valor de las propiedades TRBL, haciendo que el elemento se comporte de acuerdo a su flow natural o al indicado por la propiedad display.

Position static

.box-1,
.box-2,
.box-3 {
    position: static;
}
        

Position relative

postion: relative nos permitirá desplazar el elemento de su sitio utilizando como punto 0,0 su esquina superior izquierda natural.

El resto de los elementos de la página no se verán afectados y se comportarán como si el elemento desplazado permaneciera en su sitio.

Position relative

.box-2 {
    position: relative;
    top: 20px;
    left: 40px;
}
        

Position relative

También podremos usar valores negativos

.box-2 {
    position: relative;
    top: -20px; /* = bottom: 20px */
    left: -40px; /* = right: 40px */
}
        

Position absolute

position: absolute posicionará al elemento tomando como coordenadas 0,0 a la esquina superior izquierda del elemento contenedor, pero siempre y cuando este elemento tenga una propiedad position diferente a static

Además position: absolute quitará al elemento de su flow natural por lo que el resto de los elementos actuarán como si no existiese.

Position absolute

.container { position: relative; }
.box-2 {
    position: absolute;
    bottom: 0;
    right: 0;
}
        

Position absolute

Si el valor de position del elemento padre fuera static, tomará como referencia el siguiente elemento contenedor, y asi sucesivamente hasta encontrar un elemento apropiado o toparse con el body.

Position absolute

.container-1 { position: static; }
.container-2 { position: relative; }
.box-2 {
    position: absolute;
    bottom: 0;
    right: 0;
}
        

Position absolute

A pesar de la versatilidad que nos proporciona position:absolute, es mejor dejar su uso relegado a pequeños elementos más que a herramienta de layout, ya que si la utilizaramos en todos los elementos el contenido podría ser inaccesible.

Position absolute

.container-1 { position: relative; }
.box-1 { position: absolute; bottom: 0; left: 0; }
.box-2 { position: absolute; bottom: 0; right: 0; }
.box-3 { position: absolute; top: 0; right: 0; }
        

Position absolute

.container-1 { position: relative; overflow: hidden; }
.box-1 { position: absolute; bottom: 0; left: 0; }
.box-2 { position: absolute; bottom: 0; right: 0; }
.box-3 { position: absolute; top: 0; right: 0; }
        

Position fixed

Funcionará de manera similar a position:absolute pero utilizará como referencia para sus coordenadas la ventana del navegador, manteniendo la posición independientemente del scroll de la página.

Ver ejemplo »

z-index

z-index es la propiedad CSS que se encarga de definir la posición de los elementos en el eje z.

Por defecto, si dos elementos se superponen el que esté primero en el DOM quedará oculto debajo por los vengan a continuación.

La propiedad position también entra en juego, ya que los elementos con position: static no se ven afectados por z-index y siempre quedan por debajo de los elementos con otro valor en position.

.box-2 {
    position: relative;
        top: -20px;
        left: 20px;
}
.box-3 {
    position: relative;
        top: -40px;
        left: 40px;
}
        

z-index nos permite alterar este orden.

.box-1, .box-2, .box-3 { position: relative; }
.box-1 { z-index: 3; }
.box-2 { z-index: 2; }
.box-3 { z-index: 1; }
        

Si anidamos elementos afectaremos el resultado del z-index, ya que un elemento nunca podrá quedar por encima de uno con un z-index mayor al de su contenedor.

Para entender mejor este concepto podemos pensar que si un elemento tiene un z-index de 4, otro elemento que sea un hijo suyo con un z-index de 9 tendrá, en realidad, 4.9.

<div class="box-1"></div>
<div class="box-2">
    <div class="box-3"></div>
</div>
        

.box-1 { z-index: 2; }
.box-2 { z-index: 1; }
.box-3 { z-index: 3; }  /* z-index: 1.3 */