1
Estilos - PosicionamentoTECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Position
Estilos Posicionamento
FloatClear
Cristiana Areias - [email protected] Paris – [email protected]
Posicionamento - Position2
A propriedade position é utilizada para determinarcomo será posicionado um determinado elemento.como será posicionado um determinado elemento.
Existem três tipos de posicionamento: Static – Estático (Padrão) Absolute – Absoluto Relative – Relativo Fixed – Fixo Inherit – Indica que tem que ser herdado o posicionamento
do elemento pai. Se não for especificado qualquer propriedade, o
posicionamento é estático.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Estático3
Os elementos são apresentados segundo o fluxo normal do HTML o seja conforme estejam escritos normal do HTML, ou seja, conforme estejam escritos no próprio código HTML.
Static não provoca nenhum posicionamento especial dos elementos e portanto, os atributos top, left, right e bottom são ignorados.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
position: static;
Posicionamento Estático4
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
2
Posicionamento Estático5
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Estático6
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Estático7
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Estático8
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
3
Posicionamento Estático9
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Estático10
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo11
Um elemento cuja propriedade iti é relative posiciona se
position: relative;position é relative, posiciona-se em relação à sua posição normal.
Além disso, as camadas com posicionamento relativo, admitem os valores top, bottom, left
topbottom
leftright
e right para definir a distância em que se colocam em relação ao ponto onde esteja nesse momento o fluxo normal do HTML.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo12
Como afectam o fluxo do HTML, os elementos colocados depois das camadas relative terão em colocados depois das camadas relative, terão em conta suas dimensões para continuar o fluxo e saber onde se colocar. No entanto, não se levam em conta os top e left configurados.
O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
4
Posicionamento Relativo13
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo14
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo15
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo16
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
5
Posicionamento Relativo17
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo18
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo19
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Relativo20
No exemplo anterior, alterando a bo 2alterando a box2:
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
6
Posicionamento Relativo21
Alterando o HTML
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto22
Posiciona elementos de maneira absoluta, isto é, de maneira definida pelos alores dos t ib t t maneira definida pelos valores dos atributos top, left, bottom e right, que indicam a distância em relação a um ponto. position: absolute;
topbottom
Elementos com posicionamento não são afectados pelo lugar onde apareçam
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
bottomleftright
p g p çno código HTML e também não afectam outros elementos que façam parte do fluxo normal do HTML.
Posicionamento Absoluto23
Enquanto que um elemento cuja propriedade position relative se posiciona em relação à sua position relative se posiciona em relação à sua posição normal, um elemento com posicionamento absoluto posiciona-se em relação ao seu containercuja propriedade position não seja estática.
Um elemento posicionado de forma absoluta não cria qualquer espaço no documento e não deixa nenhum espaço vazio após ser posicionado.
Os valores top, left, bottom e right referem-se à distância referente ao primeiro elemento containerque tenha um valor de position diferente de static.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto24
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
7
Posicionamento Absoluto25
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto26
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto27
Atributo z-index: especifica em que camada se encontra em que camada se encontra caso haja sobreposição de elementos. Quanto maior, mais sobreposto se encontra
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto28
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
8
Posicionamento Absoluto29
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto30
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto31
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Absoluto32
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
9
Posicionamento Absoluto33
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Fixo34
Uma caixa sempre fixa em baixo
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Posicionamento Fixo35
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float36
Esta propriedade pode ser aplicada a qualquer elemento q e não esteja posicionado de forma elemento que não esteja posicionado de forma absoluta.
Usado para especificar se um elemento deve flutuar para a esquerda, direita ou não.
Os valores possíveis para esta propriedade são: left right none
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
10
float: left ou float:right37
Se a propriedade for left/right, então será alinhado à esq erda/direita e todo o conteúdo alinhado à esquerda/direita e todo o conteúdo subsequente irá ficado alinhado à sua direita/esquerda até que aparte de baixo do elemento seja alcançada.
Quando o conteúdo subsequente tem uma largura fi ã fl i á b di fl t t i á fixa, não fluirá sob a div flutuante, mas irá permanecer a sua largura definida.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float38
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float39
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float40
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
11
Float41
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float42
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float43
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Float44
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
12
Float45
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Clear46
Os valores possíveis são:l f left
right both none
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Centralizar site com CSS47
Exemplo1:#exemplo {
Para quem não sabe, a declaração e margin indica
#exemplo { width:750px; margin:0 auto;
}
Para quem não sabe, a declaração e margin indica que as margens superior e inferior serão “0” e as margens esquerda e direita serão calculadas automaticamente, ou seja, o site fica centralizado!
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Centralizar site com CSS48
Exemplo 2: body Left:50%
#exemplo { width:750px; margin:0 auto; left:50%;
l f 3
body Left:50%Margin-left:-375px;
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
margin-left:-375px; position:absolute;
}
cent
ro d
o ec
rã
13
Centralizar site com CSS49
Qual das duas técnicas de centralizar o site é melhor? melhor? Qualquer uma das técnicas CSS anteriores pode ser
utilizada, ambas produzem efeitos semelhantes. A diferença principal é que a primeira opção atribui
um posicionamento relativo à div principal e a outra um posicionamento absoluto. Isso, levando-se em um posicionamento absoluto. Isso, levando se em consideração as divs filhas, tem um grande impacto na composição do layout, como um todo.
TECNOLOGIAS WEBINTRODUÇÃO ÀS TECNOLOGIAS MULTIMÉDIA
Top Related