posicionamiento.html

<h1>Modelo de Cajas</h1>
<p>
    El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
</p>
<p>Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:</p>
<img src="assets/img/f0402.gif">
<p>Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:</p>
<img src="assets/img/f0403.gif">
<p>Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:</p>
<ul>
    <li>Contenido (<em>content</em>): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)</li>
    <li>Relleno (<em>padding</em>): espacio libre opcional existente entre el contenido y el borde.</li>
    <li>Borde (<em>border</em>): línea que encierra completamente el contenido y su relleno.</li>
    <li>Imagen de fondo (<em>background image</em>): imagen que se muestra por detrás del contenido y el espacio de relleno.</li>
    <li>Color de fondo (<em>background color</em>): color que se muestra por detrás del contenido y el espacio de relleno.</li>
    <li>Margen (<em>margin</em>): separación opcional existente entre la caja y el resto de cajas adyacentes.</li>
</ul>
<p>El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).</p>
<p>Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.</p>

<h1>Posicionamiento</h1>
<p>Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja.</p>
<p>Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.</p>

<p>El estándar de CSS define cinco modelos diferentes para posicionar una caja:</p>
<ul>
    <li>Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.</li>
    <li>Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.</li>
    <li>Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.</li>
    <li>Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.</li>
    <li>Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.</li>
</ul>
<p>El posicionamiento de una caja se establece mediante la propiedad <code>position</code>:</p>
<p>El significado de cada uno de los posibles valores de la propiedad <code>position</code> es el siguiente:</p>
<ul>
    <li><code>static</code>: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades <code>top</code>, <code>right</code>, <code>bottom</code> y <code>left</code> que se verán a continuación.</li>
    <li><code>relative</code>: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades <code>top</code>, <code>right</code>, <code>bottom</code> y <code>left</code>.</li>
    <li><code>absolute</code>: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades <code>top</code>, <code>right</code>, <code>bottom</code> y <code>left</code>, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.</li>
    <li><code>fixed</code>: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.</li>
</ul>
<p>La propiedad <code>position</code> no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada <code>float</code> y que se explica más adelante. Además, la propiedad <code>position</code> sólo indica cómo se posiciona una caja, pero no la desplaza.</p>
<p>Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades llamadas <code>top</code>, <code>right</code>, <code>bottom</code> y <code>left</code> para controlar el desplazamiento de las cajas posicionadas:</p>
<p>En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.</p>
<p>En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades <code>right</code> y <code>left</code>) o altura (propiedades <code>top</code> y <code>bottom</code>) del elemento.</p>

<h1 >Ancho y alto</h1>
<p>La propiedad CSS que controla la anchura de la caja de los elementos se denomina <code>width</code>.</p>
<p>La propiedad <code>width</code> no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor <code>inherit</code> indica que la anchura del elemento se hereda de su elemento padre. El valor <code>auto</code>, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.</p>
<p>El siguiente ejemplo establece el valor de la anchura del elemento <code>&lt;div&gt;</code> lateral:</p>
<div class="code css">
    <pre class="css">
        <span class="hljs-selector-id">#lateral</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>; }

    &lt;<span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">id</span>="<span class="hljs-selector-tag">lateral</span>"&gt;
      ...
    &lt;/<span class="hljs-selector-tag">div</span>&gt;</pre>
</div>

<p>CSS define otras dos propiedades relacionadas con la anchura de los elementos: <code>min-width</code> y <code>max-width</code>.</p>    
<p>La propiedad CSS que controla la altura de los elementos se denomina <code>height</code>.</p>
<p>Al igual que sucede con <code>width</code>, la propiedad <code>height</code> no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor <code>auto</code> a la altura.</p>
<p>El valor <code>inherit</code> indica que la altura del elemento se hereda de su elemento padre. El valor <code>auto</code>, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.</p>
<p>El siguiente ejemplo establece el valor de la altura del elemento <code>&lt;div&gt;</code> de cabecera:</p>
<div class="code css"><pre class="css"><span class="hljs-selector-id">#cabecera</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>; }

    &lt;<span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">id</span>="<span class="hljs-selector-tag">cabecera</span>"&gt;
      ...
    &lt;/<span class="hljs-selector-tag">div</span>&gt;</pre>
</div>
<p>CSS define otras dos propiedades relacionadas con la altura de los elementos: <code>min-height</code> y <code>max-height</code>.</p>