[CSS] Posicionamento com Z-index

A cada dia que passa utilizamos novas técnicas com CSS para estilizar nossos projetos. Hoje venho trazer uma técnica bem legal para posicionamento de imagens. Para quem não conhece o atributo ‘Z-index’, ele é utilizado para posicionar objetos uns por cima dos outros.

Mas vamos com calma, que esse atributo ainda vai dar o que falar…

Atributo Z-index em CSS

Hoje em dia temos diversas técnicas para manipular o posicionar objetos e blocos em nossos projetos, sejam com o atributo float, position e z-index etc.

Para mehor enteder vou explicar cada item acima.

Float: Esse atributo é responsável pelo posicionamento das caixas de layout do projeto. Seus valores são: left, right, none;

Position: Com este atributo conseguimos atribuir um valor absolut (absolute) e relativo (relative) para os objetos e blocos do nosso site e/ou projeto. É muito utilizado objetos que não conseguimos estilizar com o atributo Float.

Z-index: Este atributo é utilizado quando queremos manipular a exibição de objetos uns por cima dos outros. Os valores para esse atributo são atribuidos através de números.

Como posicionar um bloco com Z-index

Para que o atributo Z-index funcione temos que utilizar nos dois objetos que estamos formatando o atributo ‘position’, então temos com isso total liberdade de utilizar o atributo Z-index.

Para melhor entender veja a imagem abaixo a qual ilustrei com a demonstração do uso do atributo Z-index.

E com isso conseguimos um grande avanço em nossa diagramação em CSS, pois temos a possibilidade de dispor objetos uns por cima dos outros, sem afetar a nossa semâtica de desenvolvimento.

Não deixem de me seguir no twitter, estou sempre postando coisas novas por lá.

www.twitter.com/devpablogp

@devpablogp

Qualquer dúvida entrem em contato por e-mail: contato@pablogp.com

por: Pablo Garrido

em: Guia do PHP