Minicursos - CSS

Propriedades de Posicionamento


Muitas das propriedades de posicionamento já foram faladas, mas ainda assim vou dar uma resumida em algumas, e incluir duas, também muito importantes, que são a position e a z-index.

Vou começar revisando as que já foram faladas.

Width: determina a largura de um objeto.

Height: determina a altura de um objeto. Uma derivada dela é a propriedade min-height, que especifica o tamanho mínimo que um objeto deve ter, mas alguns browsers não a respeitam corretamente.

Top, Bottom, Right, Left: Representam, respectivamente, a parte superior, inferior, direita e esquerda de um objeto.

Position: essa propriedade também é muito importante e provoca alguns equívocos. Ela pode receber três valores, que são o fixed, absolute e relative. Vou tentar ser bem claro, mas principalmente os valores absolute e relative são um pouco confusos. Bem, vamos lá!

Position: fixed - esse valor mantém um elemento fixo nas coordenadas definidas e, mesmo que a página seja rolada para baixo ou para cima, o elemento permanecerá imóvel na página. É bastante útil quando se quer “grudar” um logotipo ou uma barra de anúncios. A definição das coordenadas deve ser feita utilizando os elementos Top, Bottom, Right e Left, da seguinte forma:

#barraAnunciantes {
width: 180px;
height: 300px;
border: 2px solid black;
position: fixed;
top: 30px;
right: 30px;
}

Percebam que o valor fixed foi definido para a propriedade Position, e logo abaixo defini sua posição, em pixels, em relação ao início da página, além da distância de sua borda direita.

Position: absolute - o ponto de partida para se entender como esse tipo de posicionamento funciona é saber que, dessa forma, o elemento é removido completamente do fluxo da página, ou seja, os outros elementos deixam de perceber que ele está lá. Na verdade o posicionamento fixo também faz isso, mas esse fato é menos importante lá. Aqui isso é de fundamental importância para a compreensão e utilização do valor absolute. Entendendo e aceitando isso fica fácil perceber que, se o elemento está independente de todos os outros, o único ponto de referência que o navegador pode usar para posicioná-lo é a coordenada 0,0 da página, conforme figura abaixo:

Posicionamento CSS

Vejamos isso tudo na prática, com o seguinte exemplo de código:

#bannerSuperior
{
height:200px;
width:100%;
border:1px solid black;
}

#corpo
{
height:400px;
border:1px solid black;
width:100%;
}

#rodape
{
height::50px;
border:1px solid black;
width:100%;
}

#molduraVideo
{
position:absolute;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}

E no HTML:

<html>
<body>
<div id="bannerSuperior">Banner superior </div>
<br />
<div id="Corpo">Corpo da página
<div id="molduraVideo"> Moldura para vídeo </div>
</div>
<br />
<div id="rodape">Rodapé </div>
</body>
</html>

Vejam como ela será exibida:

Posicionamento CSS

Notem que a div molduraVideo foi exibida com 50 pixels de distância do topo da página e com 180 pixels de espaço para o canto esquerdo, mas sempre tomando como referência o ponto 0,0 da página, ignorando completamente os outros elementos dela. Não foi por acaso que, na montagem do HTML, eu o coloquei dentro da div corpo, para demonstrar essa independência.

Position:relative - esse tipo de posicionamento é mais raro de ser encontrado, até porque ele pode ser simulado usando a propriedade padding, obtendo-se, de forma mais simples, um resultado visual muito parecido. Ainda assim é possível desenvolver montagens muito interessantes, criando efeitos de elementos que extrapolam os limites da página através do valor relative. Bem, ao contrário dos posicionamentos fixo e absoluto, no modo relativo o elemento não deixa de fazer parte do fluxo da página, ou seja, os outros elementos podem vê-lo.

Seu funcionamento é basicamente o seguinte: no momento no navegador montar a página para exibição ele “arrasta” o elemento para a direção definida. Imaginem uma pequena imagem de 40 x 40 pixels. Então para ela criamos o seguinte código:

#imagem
{
position: relative;
left:20px;
}

Com esse código a imagem será exibida a 20 pixels de onde ela realmente está. É como se para o navegador ela passasse a ter 60 pixels de comprimento. Para que fique claro vou aproveitar o código usado na propriedade com valor absolute, apenas alterando este valor para relative, deixando o código dessa forma:

#bannerSuperior
{
height:200px;
width:100%;
border:1px solid black;
}

#corpo
{
height:400px;
border:1px solid black;
width:100%;
}

#rodape
{
height::50px;
border:1px solid black;
width:100%;
}

#molduraVideo
{
position:relative;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}

Teremos, então, a seguinte página:

Posicionamento CSS

Percebam que apenas alterando o valor de absolute para relative nossa moldura já se posicionou bem abaixo de onde estava originalmente. Isso aconteceu porque no posicionamento absolute o ponto de referência é o 0,0 da página, e, como citei, nesse modo ele não faz parte do fluxo de página, portanto não há outra referência possível. No modo relative ele faz parte do fluxo, então a referência deixa de ser a coordenada 0,0 da página e passa a ser o elemento onde o objeto está contido.

Bem, com esse exemplo pode parecer que nossa moldura foi posicionada com 50 pixels de espaço do topo do elemento corpo e com 180 pixels do limite esquerdo desse mesmo elemento, mas na verdade isso não aconteceu. O que de fato está sendo criado pelo navegador é um enxerto do elemento, em 50 pixels para baixo (top:50px) e em 180 pixels para a direita (left:180px), aumentando o seu tamanho original. Ou seja, o espaço que o elemento está ocupando é ilustrado abaixo:

Posicionamento CSS

Position:static - Temos também o posicionamento com valor static, mas não vou falar muito dele, pois, na verdade, ele é o posicionamento padrão, ou seja, ele faz parte do fluxo de itens da página, sendo especificado ou não. Abaixo vou utilizar o mesmo exemplo anterior, mas com o valor static, vejam:

Posicionamento CSS

Vale ressaltar que eu NÃO removi os valores de top e left. O código CSS continua assim:

#molduraVideo
{
position:static;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}

O que acontece é que, como eu disse, quando se define o valor da propriedade para static, o fluxo obedecido é o de inserção no código HTML, desprezando-se qualquer outra definição.

Z-Index: essa propriedade é bastante interessante e não dava para não falar dela. Vocês devem ter percebido que é possível sobrepor um elemento em outro. Para isso basta que se defina a mesma posição para eles, mas, se isso acontecer, qual será exibido em primeiro plano? Bem, para resolver isso é que existe o Z-index. Vou criar um exemplo que mostra claramente como isso funciona.

Código CSS:

#bloco1{
background-color: red;
top:0px;
left:0px;
width: 70px;
height: 70px;
position: absolute;
z-index:1;
}

#bloco2{
top:10px;
left:10px;
background-color: blue;
width: 70px
height: 70px;
position: absolute;
z-index:2;
}

#bloco3{
top:20px;
left:20px;
background-color:green;
width: 70px;
height: 70px;
position: absolute;
z-index:3;
}

Código HTML:

<html> <body>
<div id="bloco1"> </div>
<div id="bloco2"> </div>
<div id="bloco3"> </div>
</body>
</html>

A página exibida é:

Posicionamento CSS Z-Index

Reparem que existe a sobreposição dos elementos, já que no código CSS eu apenas defini um deslocamento de 10 pixels para baixo e para a direita para o azul e o verde. Notem também, no código CSS, que o z-index do vermelho é 1, do azul é 2 e do verde 3. Quanto maior o valor dessa propriedade, mais prioridade na exibição o elemento terá. Vou colocar o maior valor para o elemento azul, deixando-o com z-index:4. Vejam como a página será exibida:

Posicionamento CSS Z-Index

Vejam que agora o elemento azul está em primeiro plano. Se colocarmos um valor de z-index maior para o vermelho, ele será exibido à frente, e os dois outros elementos abaixo dele. Esse é o papel do z-index!



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa

PS5 com SSDs não originais apresentam ótimo resultado

A última atualização do PS5 permite que se faça a expansão do armazenamento do console. Embora o aparelho exija características específicas para os dispositivos de expansão, como taxa de leitura de 5Gb/s, ele funciona surpreendentemente bem com SSDs de velocidades inferi...

Ler Notícia Completa

Tudo sobre o Luna, o novo serviço de streaming de jogos da Apple

Na última terça-feira a Amazon deu detalhes sobre seu serviço de streaming de jogos, o Luna. Trata-se de um serviço por assinatura, semelhante ao que faz o Netflix com filmes e séries. Com ele os jogos são trazidos para o seu dispositivo, seja uma TV, computador ou mesmo o iPhone, através da Int...

Ler Notícia Completa

The Last of Us Part II já é o maior lançamento do ano dentre todos os consoles

[sem spoilers] The Last of Us Part II agradou a muitos e desagradou a poucos, mas o fato é que a expectativa pelo lançamento do jogo era gigante! A primeira versão do jogo ganhou todos os prêmios possíveis e é considerada por quem o jogou como, no mínimo, um excelente título. Era inevitável, por...

Ler Notícia Completa

BGS 2020 é adiada devido ao coronavírus

A Brasil Game Show deste ano será adiada para os mesmos dias de 2021. Em comunicado oficial feito ontem, a organização do evento esclareceu as razões para o adiamento e comunicou que a 13ª edição da maior feira de games da América Latina acontecerá entre os dias 8 e 12...

Ler Notícia Completa

Capcom Pro Tour sofre o cancelamento de algumas etapas por conta do coronavírus

Em um comunicado ao público via redes sociais, a Capcom revelou que algumas etapas do Capcom Pro Tour foram removidas do calendário como precaução contra o surto de coronavírus pelo mundo...

Ler Notícia Completa

Organização cancela Anime Japan 2020 por causa do coronavírus

Em meio à epidemia do novo coronavírus (COVID-19), a organização do Anime Japan 2020 cancelou o evento, que aconteceria entre 21 e 24 de março, a fim de evitar a proliferação do vírus. A feira, que traz diversas novidades sobre animes, não será adiada. Além disso, o evento Family Anime Festa 20...

Ler Notícia Completa

EA é condenada por uso de imagem de jogadores

O Sindicato de Atletas Profissionais do Estado de São Paulo (SAPESP) publicou um comunicado nesta sexta (1º) relatando o parecer favorável da Justiça contra a Electronic Arts pelo uso indevido de imagem de mais de 1.500 jogadores profissionais nos jogos da franquia FIFA. A sentença da juíza Mar...

Ler Notícia Completa

Você sabia?

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.

Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!