Posicionamento - Position

Estilos - Posicionamento
TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA Position Float Clear

A propriedade position utilizada para determinar como ser posicionado um determinado elemento. Existem trs tipos de posicionamento:
Static Esttico (Padro) Absolute Absoluto Relative Relativo Fixed Fixo Inherit Indica que tem que ser herdado o posicionamento do elemento pai.

Cristiana Areias - cris@isec.pt Cesar Paris cparis@isec.pt

Se no for especificado qualquer propriedade, o posicionamento esttico.

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Esttico
3 4

Posicionamento Esttico

Os elementos so apresentados segundo o fluxo normal do HTML ou seja, conforme estejam escritos HTML, o seja no prprio cdigo HTML. Static no provoca nenhum posicionamento especial dos elementos e portanto, os atributos top, left, right e bottom so ignorados.

position: static;
TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Esttico
5 6

Posicionamento Esttico

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Esttico
7 8

Posicionamento Esttico

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Esttico
9 10

Posicionamento Esttico

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
11 12

Posicionamento Relativo

Um elemento cuja propriedade position: relative; position relative posiciona se iti relative, posiciona-se top em relao sua posio normal.

bottom left Alm disso, as camadas com posicionamento relativo, admitem os valores top, bottom, left right
e right para definir a distncia em que se colocam em relao ao ponto onde esteja nesse momento o fluxo normal do HTML.

Como afectam o fluxo do HTML, os elementos colocados depois das camadas relative tero em relative, conta suas dimenses para continuar o fluxo e saber onde se colocar. No entanto, no se levam em conta os top e left configurados. O posicionamento para posio relativa calculado com base na posio original do elemento no documento. Isto significa uma movimentao do elemento para a esquerda, para a direita, para cima ou para baixo.
TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
13 14

Posicionamento Relativo

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
15 16

Posicionamento Relativo

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
17 18

Posicionamento Relativo

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
19 20

Posicionamento Relativo

No exemplo anterior, alterando a bo 2 box2:

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Relativo
21 22

Posicionamento Absoluto

Alterando o HTML

Posiciona elementos de maneira absoluta, isto , de maneira definida pelos valores dos atributos t alores t ib t top, left, bottom e right, que indicam a distncia em relao a um ponto. position: absolute; Elementos com posicionamento no so afectados pelo lugar onde apaream p g p no cdigo HTML e tambm no afectam outros elementos que faam parte do fluxo normal do HTML.

top bottom left right

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
23 24

Posicionamento Absoluto

Enquanto que um elemento cuja propriedade position relative se posiciona em relao sua posio normal, um elemento com posicionamento absoluto posiciona-se em relao ao seu container cuja propriedade position no seja esttica. Um elemento posicionado de forma absoluta no cria qualquer espao no documento e no deixa nenhum espao vazio aps ser posicionado. Os valores top, left, bottom e right referem-se distncia referente ao primeiro elemento container que tenha um valor de position diferente de static.
TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
25 26

Posicionamento Absoluto

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
27 28

Posicionamento Absoluto

Atributo z-index: especifica em que camada se encontra caso haja sobreposio de elementos. Quanto maior, mais sobreposto se encontra

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
29 30

Posicionamento Absoluto

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
31 32

Posicionamento Absoluto

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Absoluto
33 34

Posicionamento Fixo
Uma

caixa sempre fixa em baixo

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Posicionamento Fixo
35 36

Float

Esta propriedade pode ser aplicada a qualquer elemento q e no esteja posicionado de forma que absoluta. Usado para especificar se um elemento deve flutuar para a esquerda, direita ou no. Os valores possveis para esta propriedade so:
left right none

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

float: left ou float:right

37 38

Float

Se a propriedade for left/right, ento ser alinhado esquerda/direita e todo o contedo esq erda/direita subsequente ir ficado alinhado sua direita/esquerda at que aparte de baixo do elemento seja alcanada. Quando o contedo subsequente tem uma largura fixa, no fluir sob a di fl t t mas i fi fl i b div flutuante, ir permanecer a sua largura definida.

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Float
39 40

Float

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

10

Float
41 42

Float

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Float
43 44

Float

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

11

Float
45 46

Clear

Os valores possveis so:

l f left right both none

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

Centralizar site com CSS

47 48

Centralizar site com CSS

Exemplo1:

#exemplo { width:750px; margin:0 auto; }

Exemplo 2:

body

Left:50%

Para

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

centro do ecr

quem no sabe, a declarao e margin indica que as margens superior e inferior sero 0 e as margens esquerda e direita sero calculadas automaticamente, ou seja, o site fica centralizado!

#exemplo { width:750px; margin:0 auto; left:50%; margin-left:-375px; l f 3 position:absolute; }

body

Left:50% Margin-left:-375px;

12

Centralizar site com CSS

49

Qual das duas tcnicas de centralizar o site melhor?

Qualquer

uma das tcnicas CSS anteriores pode ser utilizada, ambas produzem efeitos semelhantes. A diferena principal que a primeira opo atribui um posicionamento relativo div principal e a outra um posicionamento absoluto. Isso, levando-se em levando se considerao as divs filhas, tem um grande impacto na composio do layout, como um todo.

TECNOLOGIAS WEB INTRODUO S TECNOLOGIAS MULTIMDIA

13