Como é exibido no navegador:
Para posicionar elementos na página é necessário utilizar as propriedades de posicionamento do CSS. Uma dessas propriedades é o display que possui diversos valores importantes para posicionamento, e por isso nós vamos começar por ele.
Propriedade display
Segundo Chris Coyier , todo elemento em uma página web é renderizado como uma caixa retangular e a propriedade display do css determina como essa caixa vai se comportar. O valor do display define o comportamento, se serão em linhas, blocos e etc. Por isso é necessário entender como os valores afetam esses elementos.
Os possíveis tipos
- Inline: O elemento se comporta como um elemento de linha, ficando um ao lado do outro com um pequeno espaçamento entre eles (No nosso exemplo, pois o elemento ganha o comportamento de uma palavra). Não é possível setar altura e largura, pois o width e height não funcionam no inline.
- Block: O elemento de bloco sempre começa em uma linha e se expande para esquerda ou para direita o tanto quanto for possível, porém ele ocupa uma linha inteira, ou seja, ele não permite (Dê uma modo geral) que os elementos fiquem um ao lado do outro. Diferente do tipo inline, no block nós conseguimos setar a altura, largura e margens, porém para utilizar a margem é necessário ter uma largura defina.
Visão do navegador
- Inline-block: Semelhante ao inline, os elementos ficam um ao lado do outro, porém nós conseguimos setar a largura e a altura. Com esse valor, conseguimos alinhar os elementos utilizando o comportamento de palavras.
- None: Esse valor permite desativar a propriedade do elemento da página. Quando utilizado, o elemento e todos os seus filhos não são renderizados na página e os elementos não são ocupados por estes, seguindo o fluxo do documento. Obs: Diferente da propriedade visibility que não aparece, mas fica ocupando o espaço, o none não ocupa.
Propriedade position
- Static: É o valor padrão para todos os elementos HTML. Quando o position está com o valor static (Estático), nenhuma regra é associada de forma explícita, os elementos simplesmente seguem o fluxo que foi definido no HTML. Se tivermos três divs, uma ficará embaixo da outra (A não ser que o display esteja como inline), mesmo quando tiver valor de posicionamento aplicado sobre eles.
- Relative: Semelhe ao static, caso não seja aplicado posicionamento, os elementos se comportarão da mesma forma, um elemento ficará embaixo do outro. Porém o relative trabalha com quatro tipos de posicionamento, top (cima), bottom (baixo), left (esquerda) e right (direita) o que permite deslocar os elementos dentro da página sem afetar o posicionamento dos outros elementos, ou seja, é possível sobrepor elementos.
- Absoluto: Faz com que o elemento seja retirado do fluxo do documento e inserido em um novo contexto, isso faz os elementos ao redor agirem como se esse elemento não existisse. O elemento definido com posição absoluta só vai ser posicionado em relação a outro elemento que não tenha posição estática. Um característica do tipo absoluto é ele se move em relação a tela.
- Fixed: O posicionamento fica fixo e está associado ao documento com um todo, ao contrário do posicionamento absoluto que leva em consideração outro elemento. Ao usar o fixed, o elemento terá o mesmo posicionamento mesmo levando em conta o scroll da página.
Nenhum comentário:
Postar um comentário