# Posicionamiento

## Tamaño

Las propiedades width y height definen el tamaño de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).

Las propiedades min-width y min-height definen el tamaño mínimo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).

Las propiedades max-width y max-height definen el tamaño máximo de un elemento mediante un valor numérico (con su unidad) o un porcentaje (con respecto al elemento padre).

| div { width: 200px; height: 30px; border: black 1px solid; } | Hola, mundo

| div { width: 250px; height: 30px; border: black 1px solid; } | Hola, mundo

| div { width: 80%; height: 30px; border: black 1px solid; } | Hola, mundo

| div { width: 80%; min-width: 200px; height: 30px; border: black 1px solid; } | Hola, mundo

| div { width: 80%; max-width: 250px; height: 30px; border: black 1px solid; } | Hola, mundo

| div { width: 80%; min-width: 200px; max-width: 250px; height: 30px; border: black 1px solid; } | Hola, mundo

Volver al índice

## Overflow

La propiedad overflow establece el tratamiento que debe dar el navegador al contenido que no cabe en el elemento padre. Los valores posibles de esta propiedad son: visible, hidden (oculto), scroll (mostrar siempre barras de desplazamiento), auto (mostrar barras cuando sea necesario).

Si está definido el tamaño del elemento y overflow tiene el valor visible, Internet Explorer no hace caso de la altura del elemento y lo amplía hasta abarcar todo su contenido, mientras que en Mozilla el contenido desborda el elemento y se superpone a los siguientes elementos.

| div { width: 100px; height: 100px; border: black 1px solid; } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: visible; } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: visible; } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. Este texto ya está fuera de la división.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: hidden } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado. Este texto ya está fuera de la división.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: scroll } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: auto } | Esta división contiene un texto bastante largo que no cabe en el tamaño asignado.
| div { width: 100px; height: 100px; border: black 1px solid; overflow: auto } | Esta_división_contiene_un_texto_bastante_largo_que_no_cabe_en_el_tamaño_asignado.

Volver al índice

## Esquema de posicionamiento

Existen tres esquemas de posicionamiento: normal, flotante o absoluto:

- El esquema normal es el habitual, es decir, los elementos se muestran en la pantalla en el mismo orden en que se encuentran en la página.
- El esquema flotante es el que permite que un elemento se "salga" de su posición normal y se muestre a la izquierda o a la derecha del todo.
- El esquema absoluto permite definir la posición exacta de un elemento

### Esquema flotante

La propiedad float establece el esquema de posicionamiento flotante de un elemento. Los elementos que se encuentran a continuación del elemento flotante fluyen a lo largo del elemento flotante (salvo que tengan establecida la propiedad clear)

### Esquema absoluto

La propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos en el esquema de posicionamiento absoluto: estático (static), relativo (relative), absoluto (absolute) y fijo (fixed).

#### Posicionamiento estático (static)

Cuando se establece la propiedad position como static, el elemento se sitúa en la posición que le corresponde de acuerdo con el flujo normal del documento. Es decir, el posicionamiento estático es equivalente al esquema normal.

#### Posicionamiento relativo (relative)

Cuando se establece la propiedad position como relative, el navegador reserva el espacio en la página que tendría el elemento de acuerdo con el flujo normal del documento, pero lo representa desplazado con respecto a esa posición. El desplazamiento se establece mediante las propiedades top, bottom, left y right.

Falta contar cómo se cuenta top, bottom, left y right (valores positivos y negativos, etc).

#### Posicionamiento fijo (fixed)

Cuando se establece la propiedad position como fixed, el elemento se sitúa en la posición indicada y no se puede desplazar. Aunque la página sea larga y se pueda desplazar verticalmente, el elemento fijo estará siempre en la misma posición de la pantalla.

Internet Explorer no es capaz de representar este tipo de posicionamiento.

Ejemplo de posicionamiento fijo

Volver al índice

## z-index

Los elementos de una página web tienen no solamente una posición en el plano XY de la ventana, sino también profundidad. La propiedad z-index permite establecer la profundidad del elemento, que solamente puede observarse cuando varios elementos se superponen. El valor de la propiedad z-index debe ser un número entero. Los elementos con mayor z-index se colocan sobre los elementos con menor z-index.

| div.d1 { width: 150px; height: 150px; position: absolute; top: 0%; left: 0%; background-color: lightblue; z-index: 1; } div.d2 { width: 150px; height: 150px; position: absolute; top: 100px; left: 100px; background-color: #DDDDDD; z-index: 2;} | La propiedad z-index indica la profundidad a la que se encuentra un elemento. La propiedad z-index indica la profundidad a la que se encuentra un elemento.
| div.d1 { width: 150px; height: 150px; position: absolute; top: 0%; left: 0%; background-color: lightblue; z-index: 2;} div.d2 { width: 150px; height: 150px; position: absolute; top: 100px; left: 100px; background-color: #DDDDDD; z-index: 1;} | La propiedad z-index indica la profundidad a la que se encuentra un elemento. La propiedad z-index indica la profundidad a la que se encuentra un elemento.

Volver al índice