Posicionamiento
PosicionamientoLas 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 |
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 } |
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. |
Existen tres esquemas de posicionamiento: normal, flotante o absoluto:
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)
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).
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.
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).
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
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. |