UD02 | Diseño, ubicación y optimización de los contenidos de una página web

Posicionamiento

Elementos posicionados y no posicionados

Se presentan los elementos posiocionados y no posicionados:

Elemento no posicionado. Sin valor asignado para la propiedad position
Ejemplo:

.parrafo-1 {

    /* Elemento no posicionado. Por defecto la propiedad

       position toma el valor static */

}

Elemento no posicionado [position: static;]
Ejemplo:

.parrafo-2 {

    position: static; /* El valor static no posiciona

    el elemento */

}

Elemento posicionado [position: relative;]
Ejemplo:

.parrafo-3 {

    position: relative; /* Posicionamiento relativo */

}

Elemento posicionado [position: absolute;]
Ejemplo:

.parrafo-4 {

    position: absolute; /* Posicionamiento absoluto

    

    Saca al elemento de su "espacio original", mejor

    llamado Espacio Reservado y lo coloca al final de

    su elemento contenedor (en este caso MAIN) */

}



/* Existen otros posicionamientos */
Se presentan los elementos con posicionamiento relativo:

Posicionamiento relativo sin desplazamiento
Ejemplo:

.caja-1 {

    position: relative;

    /* El elemento se menatiene dentro de su espacio

       reservado */

}

Propiedades top y left
Ejemplo:

.caja-2 {

    position: relative;

    top: 50px;

    left: -50px; /* los valores pueden ser negativos */

    /* El elemento se desplaza respecto a su espacio

       reservado */

}

Propiedades bottom y right
Ejemplo:

.caja-3 {

    position: relative;

    bottom: 50px;

    right: -50px;

}

Conflictos entre las propiedades
Ejemplo:

.caja-6 {

    position: relative;

    top: 50px;

    bottom: 50px;

    /* bottom no tiene efecto. Prevalece la propiedad

       top. */



    left: 50px;

    right: 50px;

    /* right no tiene efecto. Prevalece la propiedad

       left. */

}
padding
Se presentan los elementos con posicionamiento absoluto:

Pérdida de espacio reservado y medidas
Ejemplo:

.caja-1 {

    position:absolute;

    /* El elemento pierde su espacio reservado y sus

       medidas.

       Se coloca en su elemento contenedor en el lugar

       que le corresponde.*/

}

Elemento que posiciona fuera del su contenedor
Ejemplo:

.caja-2 {

    position: absolute;

    top:0;

    left:0;

    /* El elemento se coloca fuera de su contenedor.

       Esto pasa cuando el contenedor no está

       posicionado. */

}

Elemento que posiciona en su contenedor
Ejemplo:

.caja-3 {

    position: absolute;

    top:0;

    left:0;

    /* El elemento se coloca dentro de su contenedor.

       Esto pasa cuando el contenedor está

       posicionado. */

}
Se presentan los elementos en línea con posicionamiento absoluto:

Sin posicionamiento absoluto
Ejemplo:

.span-1 {

    width: 200px; /* Esta propiedad no tiene efecto */

    height: 200px; /* Esta propiedad no tiene efecto */

}

Con posicionamiento absoluto
Ejemplo:

.span-2 {

    width: 200px;

    height: 200px;

    position: absolute;

    /* Con position absolute, las medidas si tienen

       efecto sobre los elementos en línea. */

}
Se presentan los elementos con posicionamiento fixed:

Sin tamaño y sin espacio reservado
Ejemplo:

header{

    position: fixed;

    /*  header pierde su tamaño y espacio reservado */

}

Con tamaño y espacio reservado
Ejemplo:

header{

    position: fixed;

    top:0;

    /* header recupera su espacio reservado */



    width:100%

    /* header recupera su tamaño */

}
Se presentan los elementos con posicionamiento sticky:

Menú "pegajoso"
Ejemplo:

<header>

<h1>Elementos con posicionamiento fixed</h1>

</header>

<nav>Aquí va el menú principal de la página</nav>
header{

    height: 400px;

    padding-top:20px;

}



nav{

    position:sticky;

    /* establecemos el posicionamiento de tipo sticky */

    

    top:0;

    /* Cuando el <nav> llega arriba del todo se queda

    pegado allí */

}

Posicionamiento vertical o apilamiento z-indez

Se presentan la propiedad z-indez:

Orden de apilamiento natural
Ejemplo:

<div>

    Soy la caja 1 | z-index omitido. Mi orden de apilamiento

    no se ve modificado.

</div>

<div class=" caja-desplazada">

    Soy la caja 2 | z-index omitido. Equivale a z-index = auto.

    Mi orden de apilamiento no se ve modificado. Estoy encima

    de la caja 1 porque aparezco después en el HTML. Es mi

    orden de apilamiento natural.

</div>
.caja-desplazada{

    position: relative;

    top:-20px;

    left: 20px;

}

z-index no funciona
Ejemplo:

<div>

    Soy un div con z-index = 10, pero mi orden de apilamiento

    no está modificado. Esto se debe a que no soy un

    elemento posicionado. z-index no tiene efecto sobre

    elementos no posicionados.

</div>
div {

    z-index: 10;

    /* Esta declaración no tiene efecto.

       Falta posicionar el elemento <div>*/

}

z-index funciona
Ejemplo:

<div>

    Soy un div con z-index = 10. Mi orden de apilamiento

    Está modificado ya que soy un elemento posicionado.

</div>
div {

    position: relative; 

    /* Esta declaración posiciona el elemento. */

    z-index: 10;

    /* Esta declaración sí tiene efecto ya que

       el elemento está posicionado.*/

}

Recomendación para z-index

Se presenta un sistema de numeración recomendado para z-index:

Numeración de 10 en 10
Ejemplo:

.caja-2{

    position: relative; 

    z-index:20;

}



.caja-1{

    position: relative;

    z-index: 10;

}

/* Es recomendable numerar los z-index con saltos de

10 en 10. De este modo, si tenemos que insertar un

nuevo elemento, con un z-index intermedio, no tendremos

que renumerar todos los z-index. */

El problema del apilamiento entre padres e hijos

Se describe el problema de los z-index entre elementos padre e hijo:

Método 1 | Coloca al padre delante del hijo (no funciona)
Ejemplo:

<div class="padre">

    Soy el padre

    <div class="hijo">

        Soy el hijo

    </div>

</div>
.padre{

 /* No esposible colocar al padre por encima del hijo */

    z-index:2; /* Esta declaración no tienen efecto */

    z-index:2!important; /* Tampoco funciona */

    z-index:9999999999; /* Es inútil */

}

Método 2 | Coloca al hijo detrás del padre (sí funciona con una condición)
Ejemplo:

<div class="padre">

    Soy el padre

    <div class="hijo">

        Soy el hijo

    </div>

</div>
.hijo{

    /* Un hijo puede colocarse detrás del padre */

    z-index: -1; /* si funciona */



.padre{

    /*

        CONDICIÓN INDISPENSABLE

        position: relative; "no permitido"

        z-index: 1;         "no poermitido"

    

        Si el contenedor está posicionado con un z-index

        distinto de auto u omitido, el hijo no podrá

        colocarse por detrás de él.

        

    */

}

Orden de Apilamiento por posicionamiento y z-index

Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento (asi como también lo hace asignar una opacidad parcial).

Orden del contexto de apilamiento de arriba a abajo:

  1. Elementos posicionados con z-index ≥ 1
  2. Elementos posicionados sin z-index declarado o con z-index: auto
  3. Elementos no posicionados
  4. Elementos posicionados con z-index < 0
Caso #1. Se presenta como los elementos posicionados con z-index ≥ 1 están por encima de los elementos posicionados sin z-index declarado o con z-index: auto:

Elemento posicionados sin z-index
Ejemplo:

<div class=" caja-1">

    Soy la caja 1<br>

    Estoy posicionada, pero no tengo z-index declarado.

</div>

<div class="caja-2">Soy la caja 2<br>

    También estoy posicionada y sin z-index declarado.

    Estoy por encima de la caja 1.

</div>
.caja-1 {

    position: relative;

}



.caja-2 {

    position: relative;



 /* Desplazamos diagonalmente la caja para crear un

    solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}

Elemento posicionado con z-index
Ejemplo:

<div class="caja-3">

    Soy la caja 3<br>

    Estoy posicionada y tengo z-index: 1.

    Estoy por encima de la caja 4.

</div>

<div class="caja-4">

    Soy la caja 4<br>

    Estoy posicionada pero no tengo z-index declarado.

</div>
.caja-3 {

    position: relative;

    z-index:1;

}



.caja-4 {

    position: relative;



 /* Desplazamos diagonalmente la caja para crear

    un solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}
Caso #2. Se presenta como los elementos posicionados sin z-index declarado o con z-index: auto están por encima de los elementos no posicionados:

Elemento no posicionado
Ejemplo:

<div class="caja-1">

    Soy la caja 1<br>

    Como no estoy posicionada, me mantengo por

    debajo de la caja 2.

</div>

<div class="caja-2">Soy la caja 2</div>
.caja-1 {

    /* Esta caja no está posicionada */

}

.caja-2 {

 /* Desplazamos diagonalmente la caja para

    crear un solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}

Elemento posicionado
Ejemplo:

<div class="caja-3">

    Soy la caja 3<br>

    Como estoy posicionada, me coloco por

    encima de la caja 4.

</div>

<div class="caja-4">Soy la caja 4</div>
.caja-3 {

    position: relative /* Esta caja está posicionada */

}

.caja-4 {

 /* Desplazamos diagonalmente la caja para

    crear un solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}
Caso #3. Se presenta como los elementos no posicionados están por encima de los elementos posicionados y con z-index < 0 Se:

Elemento sin z-index negativo
Ejemplo:

<div class="caja-1">

    Soy la caja 1<br>

    No estoy posicionada.

</div>

<div class="caja-2">

    Soy la caja 2<br>

    Estoy posicionada y me coloco por encima de la caja 1

</div>
.caja-1 {

    /* Esta caja no está posicionada */

}

.caja-2 {

    position: relative;

 /* Desplazamos diagonalmente la caja para

    crear un solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}

Elemento con z-index negativo
Ejemplo:

<div class="caja-3">

    Soy la caja 3<br>

    No estoy posicionada.

</div>

<div class="caja-4">

    Soy la caja 4<br>

    Tengo un z-index < 0 y me coloco por debajo de

    la caja 3. Nota: Para que mi -index tenga efecto

    tengo que estar posicionada.

</div>
.caja-3 {

    /* Esta caja no está posicionada */

}

.caja-4 {

    position: relative;

    z-index: -1;



 /* Desplazamos diagonalmente la caja para

    crear un solapamiento */

    margin-top: -40px;

    margin-left: 40px;

}

Problema de apilamiento entre un contenedor y un hermano

Se presenta un curioso efecto que posiciona a un elemento entre un contenedor y el contenido del contenedor:

Un elemento hermano se coloca entre un contenedor y el contenido de este.
Ejemplo:

<div class="contenedor">

    Soy un contenedor

    <p>Soy un párrafo en el contenedor.</p>

</div>

<div class="caja">

    Soy una caja<br>

    Soy hermana adyacente del contenedor. Estoy solapada

    con el contenedor, pero como no estoy posicionada me

    veo entre el contenedor y los elementops contenidos

    en este.

</div>
.contenedor {

    /* No está posicionado */

}



.caja {

 /* Desplazamos diagonalmente la caja para crear un

    solapamiento */

    margin-top: -150px;

    margin-left: 250px;

}

El elemento hermano se coloca sobre un contenedor y el contenido de este
Ejemplo:

<div class="contenedor">

    Soy un contenedor

    <p>Soy un párrafo en el contenedor.</p>

</div>

<div class="caja">

    Soy una caja<br>

    Soy hermana adyacente del contenedor. Estoy solapada

    con el contenedor. Como estoy posicionada me coloco

    sobre el contenedor y su contenido.

</div>
.contenedor {

    /* No está posicionado */

}



.caja {

    position: relative; /* El posicionamiento cambia el

    apilamiento */

 

    /* Desplazamos diagonalmente la caja para crear un

    solapamiento */

    margin-top: -150px;

    margin-left: 250px;

}

Orden de Apilamiento por transparencia

Se presenta el el modo en que la transparencia puede alterar el orden de apilamiento:

No hay transparencia
Ejemplo:

<div class="caja-1">

    Soy la caja #1<br>

    Estoy posicionada, es lo que me coloca por encima en

    el orden de apilamiento.

</div>

<div class="caja-2">

    No estoy posicionada ni tengo transparencia.

</div>
.caja-1{

    position: relative;

}



.caja-2{

    /* no hay posicionamiento ni transparencia */

}

Apilamiento modificado por la transparencia
Ejemplo:

<div class="caja-1">

    Soy la caja #1<br>

    Estoy posicionada.

</div>

<div class="caja-2">

    No estoy posicionada, pero tengo transparencia.

    La transparencia modifica el orden de apilamiento

    colocándome por encima de la caja #1.

</div>
.caja-1{

    position: relative;

}



.caja-2{

    /* no hay posicionamiento */

    opacity: 0.5; /* la transparencia

    modifica el orden de apilamiento */

}