Curso IT Fundamentos CSS 028_Float, Posicionamento, Alinhamento

Float

No CSS, float é uma técnica de layout que, através da propriedade float, faz um elemento flutuar ao longo do lado esquerdo ou direito do seu contêiner, permitindo que outros elementos o contornem.

Exemplo:

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>

Efeito: Efeito do exemplo Elementos flutuantes podem causar o colapso da altura do elemento pai, afetar outros elementos DIV, e múltiplos elementos flutuantes na mesma linha podem se sobrepor. A propriedade clear é usada para controlar a influência entre eles.

Exemplo:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Usar a propriedade `clear` para cancelar a influência dos elementos flutuantes
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 é um texto que será afetado.
6
    </div>

Efeito: Efeito do exemplo Exemplo:

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 janeiro de 2024</div><div class="float-right">Título do artigo Título do artigo Título do artigo</div>

Efeito:

Efeito do exemplo

Float foi uma técnica antiga para criar layouts de múltiplas colunas, mas nos layouts modernos, técnicas de layout mais flexíveis como Flexbox ou Grid são recomendadas.

Posicionamento

No CSS, posicionamento refere-se à definição do modo de posicionamento de um elemento através da propriedade position, bem como à especificação da posição do elemento em relação ao seu elemento ancestral posicionado mais próximo através das propriedades top, right, bottom, left.

O posicionamento é relativo ao ancestral posicionado mais próximo (position não é static). Se não houver um ancestral posicionado, o posicionamento é relativo ao bloco contêiner inicial (geralmente o elemento <html>).
Elementos com posicionamento absoluto e fixo são retirados do fluxo normal do documento e podem afetar o layout de outros elementos.
Os valores das propriedades geralmente usam pixels (px) ou porcentagens (%).

Posicionamento estático static

O posicionamento estático (Static Positioning) é o valor padrão da propriedade position e geralmente não precisa ser especificado explicitamente. Elementos com posicionamento estático são dispostos normalmente no fluxo do documento e não são afetados pelas propriedades top, right, bottom, left.

Posicionamento inicial initial

No CSS, initial é uma palavra-chave para redefinir o valor de uma propriedade para seu valor inicial. Para a propriedade position, seu valor inicial é static. Usar position: initial; equivale a não definir a propriedade position.

Posicionamento relativo relative

O elemento é posicionado em relação à sua posição normal.

Exemplo:

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> Tente adicionar br ou outros elementos -->
2
  <div class="base relative-example"></div>

Efeito: Efeito do exemplo

Posicionamento absoluto absolute

O elemento é posicionado em relação ao seu elemento ancestral posicionado mais próximo.

Exemplo:

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>

Efeito:

Efeito do exemplo

Posicionamento fixo fixed

O elemento é posicionado em relação à janela do navegador e sempre permanece em uma posição fixa na tela.

Exemplo:

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>

Efeito:

Efeito do exemplo

Posicionamento sticky sticky

O elemento se torna posicionamento fixo quando é rolado até uma posição específica, caso contrário é posicionamento relativo.

Exemplo:

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>

Efeito:

Efeito do exemplo

Posicionamento herdado inherit

O elemento herda o modo de posicionamento do seu elemento pai.

Exemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Atenção ao limite */
8
        left: 100%; /* Atenção ao limite */
9
        background-color: violet;
10
    }

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

Efeito: Efeito do exemplo

Ordem de empilhamento (elementos sobrepostos)

z-index é uma propriedade CSS para controlar a ordem de empilhamento. Ela determina a ordem de exibição de um elemento no empilhamento vertical, ou seja, qual elemento ficará na frente ou atrás de outro.

O valor de z-index pode ser negativo.
Elementos com maior z-index cobrirão os de menor valor.
z-index só é efetivo em elementos posicionados (position não é static).
z-index requer que a opacity do elemento não seja 0.

Exemplo:

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>

Alinhamento

O alinhamento CSS refere-se ao controle do alinhamento horizontal e vertical dos elementos através de propriedades CSS. As propriedades de alinhamento CSS podem ser aplicadas a qualquer elemento, incluindo texto, imagens, tabelas, listas, etc.

As propriedades de alinhamento comuns têm os seguintes valores:

left: Alinhamento à esquerda
center: Alinhamento centralizado
right: Alinhamento à direita
top: Alinhamento superior
middle: Alinhamento central
bottom: Alinhamento inferior

Alinhamento horizontal `text-align`

Usado para definir o alinhamento horizontal do conteúdo de texto dentro da caixa do elemento.

Exemplo:

1
.text-center {
2
  text-align: center; /* Centralizado horizontalmente */
3
}
4
.text-left {
5
  text-align: left; /* Alinhamento à esquerda */
6
}
7
.text-right {
8
  text-align: right; /* Alinhamento à direita */
9
}
10
.text-justify {
11
  text-align: justify; /* Justificado */
12
}

1
  <div class="text-center">Isto é um texto ABCDE 12345</div>
2
    <div class="text-left">Isto é um texto ABCDE 12345</div>
3
    <div class="text-right">Isto é um 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>

Efeito: Efeito do exemplo

Alinhamento vertical `vertical-align`

Usado para definir o alinhamento vertical dos elementos inline dentro de um elemento. Geralmente usado para elementos inline e não tem efeito direto em elementos de bloco.

Exemplo:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Alinhamento de linha base padrão */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Alinhamento superior */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Alinhamento central */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Alinhamento inferior */
15
}

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

Efeito: Efeito do exemplo

Float

Posicionamento

Posicionamento estático static

Posicionamento inicial initial

Posicionamento relativo relative

Posicionamento absoluto absolute

Posicionamento fixo fixed

Posicionamento sticky sticky

Posicionamento herdado inherit

Ordem de empilhamento (elementos sobrepostos)

Alinhamento

Alinhamento horizontal text-align

Alinhamento vertical vertical-align

Comentários

Alinhamento horizontal `text-align`

Alinhamento vertical `vertical-align`