Fundamentos do CSS

Posicionamento

Uma das principais funções do CSS é a capacidade de alterar o layout da página, interferindo sobre o posicionamento dos elementos. Isso pode ocorrer de diferentes maneiras, seja estabelecendo coordenadas, fixações e flutuações, ou mesmo sobrepondo elementos

Nesta seção serão abordas as diferentes possibilidades de posicionamento de elementos na página.

Abaixo alguns tópicos a serem desenvolvidos

• Tipos de posicionamento
• Coordenadas de posição
• Elementos em bloco e em linha
• Flutuações
• Sobreposições

Tipos de posicionamento

Com o CSS é possível mudar o comportamento padrão dos elementos. Uma página em HTML normalmente opera com a posição de cada elemento estática a partir da ordem predominantemente vertical. Portanto, um bloco de texto, imagem ou tabela tende a empurrar o próximo bloco para baixo de acordo com a ordem.

A propriedade position é capaz de alterar o comportamento dos elementos. Com ela é possível definir se o elemento manterá a posicão estática (static), ou se terá uma posição relativa (estática, absoluta ou fixa.

• static posição padrão, se move de acordo com o conteúdo
• relative posição relativa, se definida por coordendas em relação a posição original do elemento.
• absolute posição absoluta, definida pelas coordenadas em relação à página.
• fixed posição fixa, definida pelas coordenadas em relação à janela. O elemento fica fixo enquanto o resto da página se move com a rolagem.

Fora a posição estática, todas as demais posições operam por coordenadas em relação ao topo, esquerda, direita e base. Porém cada uma se comporta com sua própria característica. Exemplo:

	div {
	position: relative;
	}
	nav {
	position:  fixed;
	}
	table {
	position: absolute;
	}

Coordenadas de posição

Caso se adote as posições relativa, absoluta ou fixa, o elemento CSS precisará ser posicionado de acordo com coordenada. Isso significa que será preciso definir posições em relação ao topo, esquerda, direita e base.

O comportamento das coordenadas será afetado pelo tipo de posição, pois definir que um elemento está afastado 20 pixels do topo depende em relação a quê (à página, à posição original, ao navegador).As coordenadas são

• top distância acima do elemento.
• left distância à esquerda do elemento.
• right distância à direita do elemento.
• bottom distância abaixo do elemento.

Abaixo vemos um exemplo de uma <div> com posicionamento padrão.

A seguir, alteramos código para mudar a posição:

	div {
	position: relative;
	top:  20px;
	left: 35px;
	}

O resultado ficaria assim:

Elementos em bloco e em linha

Os elementos HTML possuem dois modelos básicos de conteúdo: bloco e linha. De acordo com o modelo, o elemento terá um ou outro tipo de comportamento.

Elementos em linha

São os elementos que normalmente ocorrem dentro de elementos em bloco, podem ser texto ou imagem e por padrão ocorrem ao longo de uma linha de texto, ao lado de outros elementos.

Sua propriedade de exibição padrão é inline – significando que essa tag deverá permanecer na mesma uma linha de texto que a tag anterior e a posterior.

Exemplo: a tag <a> define links. É possível colocar vários links na mesma linha de texto.

• <a> Define um link ou âncora
• <strong> Define um destaque (negrito)
• <em> Define uma ênfase (itálico)
• <img> Define uma imagem
• <input> Define um campo de entrada de dados (formulário)
• <abbr> Define uma abreviação (sigla)
• <span> Define um agrupamento de texto em linha

Devemos utilizar a tag <span> quando queremos modificar um conjunto no meio de uma linha de texto. Aplicar um estilo específico, por exemplo (negrito + cor de fundo a um elemento).

Este é um texto de exemplo com um pequeno trecho em negrito e destaque de outra cor. Após o elemento <span> o texto volta ao normal.

Elementos em bloco

São os elementos que definem conjuntos, blocos ou caixas dentro do HTML. Podem abrigar textos ou imagens, mas são "egoístas" pois por padrão não dividem a mesma linha com outros elementos.

Sua propriedade de exibição padrão é block – significando que essa tag deverá entrar em uma linha diferente do elemento anterior e ao fim, a próxima deverá entrar em outra linha.

Exemplo: a tag <p> define um parágrafo. Cada parágrafo aparece em uma linha diferente do anterior.

• <h1> Define um título nível 1
• <p> Define um parágrafo
• <ol> Define uma lista ordenada
• <ul> Define uma lista não ordenada
• <li> Define um item de lista
• <table> Define uma tabela
• <div> Define uma divisão ou seção do documento

Devemos utilizar a tag <div> quando queremos dividir e/ou modificar um grupo de elementos de bloco em uma parte do documento.

Com a propriedade display do CSS, é possível alterar modelo de conteúdo de um elemento de bloco para linha e vice-versa.

No exemplo a seguir, alteraremos o comportamento de uma <li> para que se torne inline. Começamos com o comportamento padrão:

Depois alteramos o modelo de conteúdo pelo CSS

	li {
	display: inline; 
	}

Finalmente, teremos a seguinte situação:

Flutuações

Flutuação é uma propriedade que um elemento possui de ficar "suspenso" na página. Isso significa que o elemento posterior não poderá ser colocado ao lado deste elemento.

O recurso float é muito empregado para o desenvolvimento de páginas com múltiplas colunas.

Abaixo vemos um exemplo de dois parágrafos formando duas colunas.

	p {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	float: left;
	width: 40%;
	background-color: yellow;
	}

O resultado ficaria assim:

É importante frisar que para continuar o fluxo da página, o elemento seguinte precisa cancelar a flutuação mediante o uso da propriedade clear.

No exemplo acima, o valor "both" cancela tanto a flutuação à direita como à esquerda.

Sobreposições

Conforme a posição dos elementos é alterada com o CSS, pode se tornar interessante definir qual elemento se sobrepõe ao outro. Para isso, utiliza-se a propriedade z-index.

Basicamente, quanto mais alto for o valor, mais por cima o elemento deverá estar.

Ao colocarmos um valor z-index mais baixo para o quadrado mudaremos a sobreposição.

	p {
	position: relative;
	top: 40px;
	width: 40%;
	background-color: yellow;
	z-index: 1;
	}
	div {
	position: relative;
	left: 43%;
	width: 50px;
	height: 50px;
	background-color: #009999;
	z-index: 0;
	}

Veja também

Voltar ao topo