CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Posicionamento

Por Benedito Silva Júnior - publicado em 13/07/2016


Essas propriedades classificam, posicionam os elementos e definem a disposição em que os mesmos devem aparecer.

Especificam como um elemento deve ser exibido, bem como seu posicionamento, distâncias, fluxos, comportamento do navegador etc.

Veja:

display: Especifica como um elemento deve ser exibido no documento:

div {display: block} img.ajuda {display: none}

position: Especifica o método de posicionamneto utilizado pelo elemento:

div {position: absolute} p {position: relative}

top: Especifica a distância vertical do elemento em relação à margem superior de sua área de apresentação:

div {top: 10px} p {top: auto}

right: Especifica a distância horizontal do elemento em relação à margem direita de sua área de apresentação:

div {right: 15%} p {right: auto}

bottom: Especifica a distância vertical do elemento em relação à margem inferior de sua área de apresentação:

div {bottom: 90%} p {bottom: auto}

left: Especifica a distância horizontal do elemento em relação à margem esquerda de sua área de apresentação:

div {left: 50px} p {left: auto}

float: Especifica se os elementos são apresentados seguindo o fluxo normal do conteúdo do documento:

div {float: left} p {float: none}

clear: Especifica se o elemento pode flutuar com outros elementos, propriedade float, e como ocorrerá o posicionamento de ambos:

div {clear: left} p {clear: none}

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:

div {z-index: auto} p span {z-index: 0}

overflow: Especifica o comportamento do navegador quando as dimensões de um elemento forem maiores que sua área de apresentação:

div {overflow: scroll} p {overflow: auto}

clip: Especifica qual parte da área do elemento será exibida:

div {visibility: visible} div.ajuda {visibility: hidden}


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo