O documento discute propriedades CSS para posicionamento e estilo de elementos em uma página web. Ele explica propriedades como display, position, float, top, left, z-index e seus valores e como eles controlam a exibição, posição e sobreposição de elementos.

1. 1
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
CSS
Cascading Style Sheets
Folhas de Estilo em Cascata
Parte III - b

2. 2
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Posicionamento
Essas propriedades classificam, posicionam os elementos e definem a
disposição em que os mesmos devem aparecer.
Display
Especifica como um elemento deve ser exibido em um documento.
Seletor {display: valor}
Div {display: block}
div.ajuda {display: none}
O navegador apresenta o elemento como um elemento interno. É o valor
padrão.
Inline
Não exibe o elemento embora o carregue na memória.none
O navegador apresenta o elemento como um elemento em bloco.block
DescriçãoValor

3. 3
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Top
Especifica a distância vertical do elemento em relação à
margem superior de sua área de apresentação.
Seletor {top: valor}
div {top: 20px}
p {top: auto}
Outros exemplos:
div {right: 20px}
div {left: 20px}
div {bottom: 20px}
A distância é calculada automaticamente em relação à margem superior do
elemento pai. È o valor padrão.
auto
Especifica a distância em valores fixos.Tamanho
Especifica a distância em porcentagem relativa ao tamanho do elemento pai.Porcentagem
DescriçãoValor

4. 4
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Position
Especifica o método de posicionamento utilizado pelo
elemento.
Seletor {position: valor}
div {position: absolute}
p {position: relative}
O elemento é posicionado obedecendo a ordem de aparecimento no
documento. As propriedades top e left não tem efeito nesse caso. É o
valor padrão.
static
O elemento é posicionado em uma posição relativa a ocupada se estivesse
como valor static.
relative
Igual ao valor absolute, mas o elemento se mantém fixo em sua posição
mesmo que o documento seja movido pelas barras de rolagem.
fixed
O elemento é posicionamento levando em consideração os valores das
propriedades top e left.
Absolute
DescriçãoValor

5. 5
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Float
Especifica se os elementos são apresentados seguindo o fluxo normal do
conteúdo do documento.
Seletor {float: valor}
Div {float: left}
P {float: none}
O elemento flutua a direita do conteúdo.right
O elemento flutua a esquerda do conteúdo.left
O elemento não flutua sobre o conteúdo. É o valor padrão.none
DescriçãoValor

6. 6
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Z-index
Especifica uma Terceira dimensão, diferente das especificadas pelas
propriedades top e left, que permitirá que os elementos sejam
posicionados uns sobre os outros, dando uma sensação de
proximidade.
Seletor {z-index: valor}
div {z-index: auto}
p span {z-index:0}
Especifica a ordem de apresentação a ser utilizada.número
Utiliza o valor atribuído ao elemento-pai. É o valor
padrão.
auto
DescriçãoValor