Curso HTML5 e CSS - Como posicionar elementos com CSS? - position, relative, absolute, fixed, margin, padding - Leandro Guarino - Curso de Grails e Groovy, Vídeo-aulas gratuitas de Programação
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 - criando a primeira página
HTML5 - textos
HTML5 - listas numeradas e não-numeradas
HTML5 - imagens
HTML5 - posicionamento
Vídeo-aula - Validação de formulário com JavaScript
Vídeo-aula - Seletores CSS
Vídeo-aula - Formulário com JQuery, Bootstrap, máscara e Bootstrap Notify
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.
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.
width: 300; /*largura*/
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*/
<h1>Elemento absoluto</h1>
<p>Nada disso que está na página interfere no posicionamento do elemento absoluto.</p>
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:
#divisao{
width: 300px; /*largura*/
bottom: 300px; /*300 pixels a partir do rodapé da página*/
right: 150px; /*150 pixels a partir da margem direita da página*/
<div id="divisao">
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.
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*/
z-index: 10; /*posição no eixo Z (profundidade)
#baixo{
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)*/
<p>Elemento da frente</p>
<p>Elemento de trás</p>
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.
#absoluto{
<p>Role a página para ver que o elemento fixo fica parado e o elemento absoluto muda de posição.</p>