Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - posicionamento e espaçamento

Em alguns layouts com HTML5 e CSS, pode ser necessário posicionar elementos em posições específicas da página. Sendo assim, precisamos aprender outros tipos de posicionamento além do uso das propriedades float e clear.

Temos 3 tipos de posicionamento importantes: relative, absolute e fixed.
Por padrão, todo elemento HTML é posicionado com o posicionamento relative, ou seja, os elementos vão se "encaixando" uns nos outros, de acordo com as propriedades float e clear.

O posicionamento relativo é abordado na aula inicial sobre layout.

Vamos aprender a usar os outros tipos de posicionamento.

position: absolute

No posicionamento absoluto, definimos a posição X e Y do elemento HTML na página. Ou seja, consideramos que a página é como um plano cartesiano e posicionamos o elemento de forma absoluta em relação à página. Forma absoluta? Sim, independentemente dos outros elementos que estão na página.
O canto esquerdo superior da página é a posição 0 do eixo X e 0 do eixo Y.

Portanto, se queremos que um <div> seja posicionado 100 pixels mais para a direita e 200 pixels mais para baixo, devemos usar o seguinte código.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Página de exemplo</title>
        <style type="text/css">
            #topo{
                position: absolute;
                width: 300; /*largura*/
                height: 150px; /*altura*/
                top: 200px; /*200 pixels a partir do topo da página*/
                left: 100px; /*100 pixels a partir da margem esquerda da página*/
                background-color: #ffcc00; /*cor de fundo do div*/
            }            
        </style>
    </head>
    <body>

    <div id="topo">
        <h1>Elemento absoluto</h1>
    </div>

    <p>Nada disso que está na página interfere no posicionamento do elemento absoluto.</p>

    </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Também é possível posicionar elementos a partir da margem direita ou do rodapé da página.
Para isso são usadas as propriedades right e bottom.
Por exemplo, se queremos posicionar um <div> 150 pixels a partir da margem direita e 300 pixels a partir do rodapé, devemos usar o seguinte código:


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Página de exemplo</title>
        <style type="text/css">
            #divisao{
                position: absolute;
                width: 300px; /*largura*/
                height: 120px; /*altura*/
                bottom: 300px; /*300 pixels a partir do rodapé da página*/
                right: 150px; /*150 pixels a partir da margem direita da página*/
                background-color: #ffcc00; /*cor de fundo do div*/
            }
        </style>
    </head>
    <body>

    <div id="divisao">
        <h1>Elemento absoluto</h1>
    </div>

    <p>Nada disso que está na página interfere no posicionamento do elemento absoluto.</p>

    </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Colocando um elemento HTML na frente do outro

O posicionamento absoluto é comumente usado quando se deseja colocar um elemento HTML na frente do outro.
Para isso, é usada a propriedade CSS z-index (índice do eixo Z). Imaginando que a página agora tem 3 dimensões (X, Y e Z, onde Z é a profundidade), podemos posicionar elementos mais para frente ou mais para trás (mas não ache que o site é um filme 3D).

No exemplo abaixo, o elemento topo aparecerá na frente do elemento baixo, porque o valor do z-index do elemento topo é maior que do outro elemento.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Página de exemplo</title>
        <style type="text/css">
            #topo{
                position: absolute;
                width: 300px; /*largura*/
                height: 250px; /*altura*/
                top: 100px; /*100 pixels a partir do topo da página*/
                left: 150px; /*150 pixels a partir da margem esquerda da página*/
                background-color: #ffcc00; /*cor de fundo do div*/
                z-index: 10; /*posição no eixo Z (profundidade)
            }
            #baixo{
                position: absolute;
                width: 300px; /*largura*/
                height: 400px; /*altura*/
                top: 50px; /*50 pixels a partir do topo da página*/
                left: 50px; /*50 pixels a partir da margem esquerda da página*/
                background-color: #cc0000; /*cor de fundo do div*/
                z-index: 1; /*posição no eixo Z (profundidade)*/
            }
        </style>
    </head>
    <body>

    <div id="topo">
        <p>Elemento da frente</p>
    </div>

      <div id="baixo">
        <p>Elemento de trás</p>
    </div>

    </body>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

position: fixed

As mesmas propriedades CSS top, left, right, bottom e z-index são usadas com o posicionamento fixo.
A diferença entre o posicionamento fixo e o posicionamento absoluto é que um elemento posicionado como fixo não altera sua posição mesmo que o usuário role a página, já um elemento posicionado com o tipo absoluto tem sua posição alterada.
Copie o código abaixo, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.
O elemento absoluto tem sua posição alterada quando você rola a página.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Página de exemplo</title>
        <style type="text/css">
            #absoluto{
                position: absolute;
                width: 300px; /*largura*/
                height: 250px; /*altura*/
                top: 100px; /*100 pixels a partir do topo da página*/
                left: 150px; /*150 pixels a partir da margem esquerda da página*/
                background-color: #ffcc00; /*cor de fundo do div*/
            }
            #fixo{
                position: fixed;
                width: 300px; /*largura*/
                height: 400px; /*altura*/
                top: 50px; /*50 pixels a partir do topo da página*/
                left: 50px; /*50 pixels a partir da margem esquerda da página*/
                background-color: #cc0000; /*cor de fundo do div*/                
            }
        </style>
    </head>
    <body>

        <p>Role a página para ver que o elemento fixo fica parado e o elemento absoluto muda de posição.</p>
        
        <div id="absoluto">
            <p>Elemento absoluto</p>
        </div>

          <div id="fixo">
            <p>Elemento fixo</p>
        </div>

        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />

    </body>
</html>
Voltar ao Índice