Ubicar un elemento en la parte inferior. Desplazamiento de la caja (respecto al límite inferior del contenedor).

Para elementos con posición absoluta, la propiedad inferior establece el borde inferior de un elemento en una unidad por encima / por debajo del borde inferior de su antecesor posicionado más próximo.

Nota: Si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Nota: Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto estática.

Para elementos relativamente posicionados, la propiedad inferior establece el borde inferior de un elemento en una unidad por encima o por debajo de su posición normal.

Nota: Si "position: static", la propiedad bottom no tiene efecto.

Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra.

La propiedad bottom permite desplazar un elemento respecto a su posición original tomando como referencia el borde inferior del elemento, solo si la propiedad position tiene valor relative. Si la propiedad position tiene valor absolute el desplazamiento toma como referencia el borde inferior de la caja padre la cual debe tener declarada su altura.

Sintaxis: bottom: auto | length | initial | inherit;

Posibles valores:

• auto - Permite al navegador calcular la posición del borde inferior. Esto es el predeterminado.
• length - Establece la posición del borde inferior en px, cm, etc. Se permiten valores negativos.
• % - Establece la posición del borde inferior en % del elemento que contiene. Se permiten valores negativos.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div id="divPadre">
        <div id="Mydiv">TEXTO A MOSTRAR</div>
    </div>
    <h2>Propiedad bottom: auto</h2>
</div>

<style>
#divPadre {
    width: 100px; height: 110px; margin: auto;
    border: 10px solid #000000;
    position: relative;
}
#Mydiv {
    width: 100px; background-color: yellow;
    position: 
                        relative
                        absolute
                     ;
    bottom: 
                        auto
                        10px
                        25px
                        50px
                        100px
                        -10px
                        -25%
                        -50px
                        -100px
                        initial
                        0%
                        10%
                        25%
                        50%
                        100%
                        -10%
                        -25%
                        -50%
                        -100%
                    
</style>

Especifica qué lados de un elemento en el que no se permiten otros elementos flotantes.

Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante.

La propiedad clear indica el lado o lados de una caja que no debe ser adyacente a un elemento posicionado de forma flotante con la propiedad float

Sintaxis: clear: none | left | right | both | initial | inherit;

Valores de propiedad:

• none - Por defecto. Permite elementos flotantes en ambos lados.
• left - No se permiten elementos flotantes en el lado izquierdo.
• right - No se permiten elementos flotantes en el lado derecho.
• both - No se permiten elementos flotantes en el lado izquierdo o derecho.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>Propiedad clear</h2>
    <img src="Imagen.jpg" id="img1"/>
    <p id="P1">Texto de parrago 1</p>
    <p id="P2">Texto de parrago 2</p>
    <p id="P3">Texto de parrago 3</p>
</div>

<style>
div {
    outline: 5px solid black; padding:10px;
    width:350px; margin:20px auto;
}
#img1 { float: 
            none
            left
            right
        ; }
#P1 { clear: 
            none
            left
            right
            both
        ; }
#P2 { clear: 
            none
            left
            right
            both
        ; }        
</style>

Posicionamiento flotante. Define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento.

La propiedad float especifica si una caja (un elemento) debe flotar.

Nota: ¡Los elementos con posición absoluta ignoran la propiedad flotante!

Nota: Los elementos después de un elemento flotante fluirán alrededor de él. Para evitar esto, utilice la propiedad clear o clearfix hack

Sintaxis: float: none | left | right | initial | inherit;

Valores de propiedad:

• none - El elemento no está flotado y se mostrará justo donde se encuentra en el texto. Esto es el predeterminado.
• left - El elemento flota a la izquierda.
• right - El elemento flota a la derecha.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>Propiedad float: none</h2>
    <p>
    Texto 
    <img src="IMAGEN" id="img2"/>
    texto
    </p>
</div>

<style>
div {
    outline: 5px solid black; padding: 10px;
    width: 350px; margin: 20px auto;
}
#img2 { float: 
            none
            left
            right
        
</style>

Para elementos con posición absoluta, la propiedad izquierda establece el borde izquierdo de un elemento en una unidad a la izquierda / derecha del borde izquierdo de su antecesor posicionado más cercano.

Si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Nota: Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto estática.

Para elementos relativamente posicionados, la propiedad izquierda establece el borde izquierdo de un elemento en una unidad a la izquierda / derecha hasta su posición normal.

Nota: Si "position: static", la propiedad left no tiene efecto.

Sintaxis: left: auto | longitud | initial | inherit;

Valores de propiedad:

• auto - Permite al navegador calcular la posición del borde izquierdo. Esto es el predeterminado.
• longitud - Establece la posición del borde izquierdo en px, cm, etc. Se permiten valores negativos.
• % - Establece la posición del borde izquierdo en % del elemento que contiene. Se permiten valores negativos.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<h2>Propiedad left: auto</h2>
<div>
  <img src"URL de imagen"/>
</div>

<style>
h2 { text-align: center; }
div {
    background-color: #F8EDCB; border: 1px solid #B39207;
    height: 150px; margin: 20px auto; width: 200px;
}
img {
    position: relative;
    left: 
            auto
            20px
            50%
            -3em
            -10%
            initial
         ;
}
</style>

La propiedad de posición especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto o fijo).

Sintaxis: position: static | absolute | fixed | relative | initial | inherit;

Posibles valores:

• static - Estático: valor por defecto. Los elementos se procesan en orden, tal como aparecen en el flujo de documentos.
• absolute - Absoluto: el elemento se posiciona en relación con su primer elemento (no estático) anclado.
• fixed - Fijo: el elemento se posiciona en relación con la ventana del navegador.
• relative - Relativo: el elemento se posiciona en relación con su posición normal, por lo que "left: 20px" añade 20 píxeles a la posición LEFT del elemento.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<h2>Propiedad position: relative</h2>
<div class="contenedor">
    <div class="i1"><img src="img1.png"/></div>
    <div class="i2"><img src="img2.png"/></div>
    <div class="i3"><img src="img3.png"/></div>
</div>

<style>
h2 { text-align:center; }
.contenedor { border: 5px solid #9F9D9D; height: 200px; position: relative; width: 200px; margin: 20px auto; }
.i1,.i2,.i3 { width: 50px; height: 50px; }
img { width: 50px; height: 50px; }
.i1 { background-color: #FB0105; }
.i2{ background-color: #1503FC;
    position: 
    relative
    static
    absolute
    fixed
 ;
    left: 
    20px
    50px
    -20px
    50%
 ;
    top: 
    20px
    50px
    -20px
    50%
 ; }
.i3 { background-color: #04F919; }
<style>

Para elementos con posición absoluta, la propiedad derecha establece el borde derecho de un elemento en una unidad a la izquierda / derecha del borde derecho de su antecesor posicionado más cercano.

Si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto estática.

Para elementos relativamente posicionados, la propiedad derecha establece el borde derecho de un elemento a una unidad a la izquierda / derecha a su posición normal.

Si "position: static", la propiedad derecha no tiene efecto.

Sintaxis: right: auto | longitud | initial | inherit;

Posibles valores:

• auto - Permite al navegador calcular la posición del borde derecho. Esto es el predeterminado.
• longitud - Establece la posición del borde derecho en px, cm, etc. Se permiten valores negativos.
• % - Establece la posición del borde derecho en % del elemento que contiene. Se permiten valores negativos.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<h2>Propiedad right: auto</h2>
<div>
  <img src"URL de imagen"/>
</div>

<style>
h2 { text-align: center; }
div {
    background-color: #F8EDCB; border: 1px solid #B39207;
    height: 150px; margin: 20px auto; width: 200px;
}
img {
    position: relative;
    right: 
        auto
        20px
        50px
        100px
        -20px
        -50px
        -100px
        20%
        50%
        100%
        -20%
        -50%
        -100%
        initial
     ;
}
<style>

Para elementos con posición absoluta, la propiedad superior fija el borde superior de un elemento a una unidad por encima / por debajo del borde superior del antepasado posicionado más próximo.

Si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.

Un elemento "posicionado" es aquel cuya posición es cualquier cosa excepto estática.

Para elementos relativamente posicionados, la propiedad superior fija el borde superior de un elemento a una unidad por encima o por debajo de su posición normal.

Si "position: static", la propiedad superior no tiene ningún efecto.

Sintaxis: top: auto | longitud | initial | inherit;

Posibles valores:

• auto - Permite al navegador calcular la posición del borde superior. Esto es el predeterminado.
• longitud - Establece la posición del borde superior en px, cm, etc. Se permiten valores negativos.
• % - Establece la posición del borde superior en% del elemento que contiene. Se permiten valores negativos.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<h2>Propiedad top: auto</h2>
<div>
    <img src"URL de imagen"/>
</div>

<style>
h2 { text-align: center; }
div {
    background-color: #F8EDCB; border: 1px solid #B39207; height: 150px; margin: 20px auto; width: 200px;
}
img {
    position: relative;
    top: 
            auto
            20px
            50px
            100px
            -20px
            -50px
            -100px
            20%
            50%
            100%
            -20%
            -50%
            -100%
            initial
        
}
<style>

La propiedad vertical-align establece la alineación vertical de un elemento.

Sintaxis: vertical-align: baseline | longitud | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Posibles valores:

• baseline - Alinea la línea de base del elemento con la línea de base del elemento padre. Esto es el predeterminado.
• longitud - Aumenta o baja un elemento según la longitud especificada. Se permiten valores negativos.
• % - Aumenta o baja un elemento en un porcentaje de la propiedad "line-height". Se permiten valores negativos.
• sub - Alinea el elemento como si fuera subíndice.
• super - Alinea el elemento como si fuera superíndice.
• top - La parte superior del elemento está alineada con la parte superior del elemento más alto de la línea.
• text-top - La parte superior del elemento está alineada con la parte superior de la fuente del elemento principal.
• middle - El elemento se coloca en el medio del elemento primario.
• bottom - La parte inferior del elemento está alineada con el elemento más bajo de la línea.
• text-bottom - La parte inferior del elemento está alineada con la parte inferior de la fuente del elemento principal.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<h2>Propiedad vertical-align: baseline</h2>
<div>
    <img src"URL de imagen"/> <span>TEXTO</span>
</div>

<style>
h2 { text-align: center; }
div {
    background-color: #F8EDCB; border: 1px solid #B39207;
    height: 100px; margin: 20px auto; width: 250px;
}
img {
    vertical-align: 
            baseline
            sub
            super
            top
            text-top
            middle
            bottom
            text-bottom
            0px
            10px
            25px
            -25px
            -50px
            1cm
            10%
            50%
            initial
         ;
}
<style>