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 posiciona-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!



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa

Facebook investirá mais de US$ 1 bilhão em conteúdo original em 2018

Anunciada em agosto, a plataforma original de vídeos do Facebook, Watch, parece ser a grande aposta de Mark Zuckerberg para o ano que vem. De acordo com o TechCrunch, a empresa deve investir US$ 1 bilhão para criar e incentivar iniciativas voltadas para a produção de conteúdo audiovisual exclu...

Ler Notícia Completa

Software da Adobe é capaz de manipular gravações de voz e criar frases com perfeição

O software se chama Voco, foi desenvolvido pela Adobe (a mesma criadora do Photoshop) e permite manipular gravações de voz com uma precisão inédita, inclusive criando frases que a pessoa não disse. Na demonstração do app, um técnico forjou uma gravação em que um homem dizia “eu beijei a Jordan...

Ler Notícia Completa

Games nos Jogos Olímpicos de 2024. Será?

Sabe aquela discussão sobre os jogos eletrônicos poderem ou não ser considerados esportes? Pois o comitê responsável pela realização dos Jogos Olímpicos de 2024 acaba de colocar mais um pouco de lenha nesta fogueira. Isso aconteceu através da divulgação de que eles gostariam de incorporar torne...

Ler Notícia Completa

Algoritmo de Inteligência artificial sabe quando você está sonhando

Pesquisadores da Divisão de Medicina do Sono do Hospital Geral de Massachusetts desenvolveram um algoritmo capaz de identificar quando uma pessoa está sonhando. A tecnologia usa sinais de rádio frequência, através de um dispositivo semelhante a um roteador Wi-Fi, para monitorar a pessoa durante...

Ler Notícia Completa

Equipamentos hospitalares podem ser facilmente hackeados, afirma o governo dos EUA

A equipe de emergências digitais de sistemas de controle industrial dos EUA (ICS-CERT) emitiu ontem um alerta chamando atenção para falhas de segurança em alguns equipamentos hospitalares. As brechas são bastante graves, tanto que, segundo o comunicado, "um atacante com pouca habilidade poderia...

Ler Notícia Completa

Cientistas desvendam segredos de concreto super-resistente criado na Roma Antiga

Pesquisadores desvendaram a química do concreto romano que há milhares de anos resiste à erosão do tempo. Barragens marítimas construídas na época da Roma Antiga empregavam uma mistura de cal e cinzas vulcânicas para manter as rochas unidas. Agora, cientistas descobriram que elementos do materi...

Ler Notícia Completa

Inteligência artificial do Google aprende sozinha a andar e saltar obstáculos

A DeepMind, empresa de inteligência artificial do Google, divulgou ontem três estudos sobre o uso de sistemas de aprendizagem de máquina para ensinar robôs a andar. Os sistemas permitiam que máquinas aprendessem sozinhas a andar em um ambiente simulado. Segundo a empresa, dominar o controle mo...

Ler Notícia Completa

Vírus Petya apavora usuários e empresas ao redor do mundo nesta terça-feira. Saiba como se proteger.

Um novo malware está apavorando usuários ao redor do mundo nesta terça-feira, 27 de junho. Trata-se de mais um Ransomware, que sequestra os dados dos computadores, criptografando-os e solicitando um pagamento em troca da senha capaz de disponibilizar os arquivos novamente. Este malware foi bati...

Ler Notícia Completa

Microsoft está preparando celular 'diferente de tudo o que existe hoje'

Satya Nadella assumiu o comando da Microsoft em 2014, sucedendo Steve Ballmer. Foi sob a presidência dele que a empresa vendeu a divisão de smartphones (adquirida com a compra da Nokia em 2011) após o imparável fracasso do Windows Phone. O último celular da Microsoft foi o Lumia 950, lançado no...

Ler Notícia Completa

Você sabia?

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Você gostará destes vídeos: