Posicionamento em CSS

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

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}

Seletores em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css | posicionamento