CSS Posicionamento

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.


position: static;



2









3





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.



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.


4









5








No exemplo anterior, alterando a bo 2alterando a box2:


6


Alterando o HTML


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


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.


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.




7






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




8









9



Posicionamento Fixo34

Uma caixa sempre fixa em baixo


Posicionamento Fixo35


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


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.


Float38


Float39


Float40


11

Float41


Float42


Float43


Float44


12

Float45


Clear46

Os valores possíveis são:l f left

right both none


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!



Exemplo 2: body Left:50%

#exemplo { width:750px; margin:0 auto; left:50%;

l f 3

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


margin-left:-375px; position:absolute;

}

cent

ro d

o ec

rã

13


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.


Documents

CSS Posicionamento