Curso IT Fundamentos CSS 028_Float, Posicionamiento, Alineación

Float

En CSS, float es una técnica de maquetación que, a través de la propiedad float, hace que un elemento flote a lo largo del lado izquierdo o derecho de su contenedor, permitiendo que otros elementos lo rodeen.

Ejemplo:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

Efecto: Efecto del ejemplo Los elementos flotantes pueden causar el colapso de la altura del elemento padre, afectar a otros elementos DIV, y múltiples elementos flotantes en la misma línea pueden superponerse. Se necesita usar la propiedad clear para controlar la influencia entre ellos.

Ejemplo:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Usar la propiedad `clear` para cancelar la influencia de los elementos flotantes
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        Este es un texto que será afectado.
6
    </div>

Efecto: Efecto del ejemplo Ejemplo:

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">25 de enero de 2024</div><div class="float-right">Título del artículo Título del artículo Título del artículo</div>

Efecto:

Efecto del ejemplo

Float fue una técnica temprana para crear diseños de múltiples columnas, pero en los diseños modernos, se recomiendan técnicas de maquetación más flexibles como Flexbox o Grid.

Posicionamiento

En CSS, el posicionamiento se refiere a establecer el modo de posicionamiento de un elemento a través de la propiedad position, así como especificar la posición del elemento relativa a su elemento ancestro posicionado más cercano a través de las propiedades top, right, bottom, left.

El posicionamiento es relativo al ancestro posicionado más cercano (position no es static). Si no hay un ancestro posicionado, el posicionamiento es relativo al bloque contenedor inicial (generalmente el elemento <html>).
Los elementos con posicionamiento absoluto y fijo se sacan del flujo normal del documento y pueden afectar la maquetación de otros elementos.
Los valores de las propiedades generalmente usan píxeles (px) o porcentajes (%).

Posicionamiento estático static

El posicionamiento estático (Static Positioning) es el valor predeterminado de la propiedad position y generalmente no necesita ser especificado explícitamente. Los elementos con posicionamiento estático se disponen normalmente en el flujo del documento y no son afectados por las propiedades top, right, bottom, left.

Posicionamiento inicial initial

En CSS, initial es una palabra clave para restablecer el valor de una propiedad a su valor inicial. Para la propiedad position, su valor inicial es static. Usar position: initial; equivale a no establecer la propiedad position.

Posicionamiento relativo relative

El elemento se posiciona relativamente a su posición normal.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> Intente agregar br u otros elementos -->
2
  <div class="base relative-example"></div>

Efecto: Efecto del ejemplo

Posicionamiento absoluto absolute

El elemento se posiciona relativamente a su elemento ancestro posicionado más cercano.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

Efecto:

Efecto del ejemplo

Posicionamiento fijo fixed

El elemento se posiciona relativamente a la ventana del navegador y siempre permanece en una posición fija en la pantalla.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Efecto:

Efecto del ejemplo

Posicionamiento pegajoso sticky

El elemento se convierte en posicionamiento fijo cuando se desplaza a una posición específica, de lo contrario es posicionamiento relativo.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Efecto:

Efecto del ejemplo

Posicionamiento heredado inherit

El elemento hereda el modo de posicionamiento de su elemento padre.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Tenga en cuenta el límite */
8
        left: 100%; /* Tenga en cuenta el límite */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

Efecto: Efecto del ejemplo

Orden de apilamiento (elementos superpuestos)

z-index es una propiedad CSS para controlar el orden de apilamiento. Determina el orden de visualización de un elemento en el apilamiento vertical, es decir, qué elemento estará delante o detrás de otro.

El valor de z-index puede ser negativo.
Los elementos con mayor z-index cubrirán a los de menor valor.
z-index solo es efectivo en elementos posicionados (position no es static).
z-index requiere que la opacity del elemento no sea 0.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

Alineación

La alineación CSS se refiere al control de la alineación horizontal y vertical de los elementos a través de propiedades CSS. Las propiedades de alineación CSS se pueden aplicar a cualquier elemento, incluyendo texto, imágenes, tablas, listas, etc.

Las propiedades de alineación comunes tienen los siguientes valores:

left: Alineación a la izquierda
center: Alineación centrada
right: Alineación a la derecha
top: Alineación superior
middle: Alineación central
bottom: Alineación inferior

Alineación horizontal `text-align`

Se usa para establecer la alineación horizontal del contenido de texto dentro del cuadro del elemento.

Ejemplo:

1
.text-center {
2
  text-align: center; /* Centrado horizontal */
3
}
4
.text-left {
5
  text-align: left; /* Alineación a la izquierda */
6
}
7
.text-right {
8
  text-align: right; /* Alineación a la derecha */
9
}
10
.text-justify {
11
  text-align: justify; /* Justificado */
12
}

1
  <div class="text-center">Esto es un texto ABCDE 12345</div>
2
    <div class="text-left">Esto es un texto ABCDE 12345</div>
3
    <div class="text-right">Esto es un texto ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

Efecto: Efecto del ejemplo

Alineación vertical `vertical-align`

Se usa para establecer la alineación vertical de los elementos en línea dentro de un elemento. Generalmente se usa para elementos en línea y no tiene efecto directo en los elementos de bloque.

Ejemplo:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Alineación de línea base predeterminada */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Alineación superior */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Alineación central */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Alineación inferior */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">Esto es un texto ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">Esto es un texto ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">Esto es un texto ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">Esto es un texto ABCDE 12345
12
    </div>

Efecto: Efecto del ejemplo

Float

Posicionamiento

Posicionamiento estático static

Posicionamiento inicial initial

Posicionamiento relativo relative

Posicionamiento absoluto absolute

Posicionamiento fijo fixed

Posicionamiento pegajoso sticky

Posicionamiento heredado inherit

Orden de apilamiento (elementos superpuestos)

Alineación

Alineación horizontal text-align

Alineación vertical vertical-align

Comentarios

Alineación horizontal `text-align`

Alineación vertical `vertical-align`