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:
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:
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:
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:
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:
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 é:
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:
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!
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
-
Gabinetes
-
Placas-Mãe
-
Processadores
-
Memória
-
Fontes
-
Drives Ópticos
-
Discos Rígidos
-
SSD
-
Placas de Som
-
Placas de Vídeo
Você Sabia?
Cuidados com o notebook
Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.
Computadores de 1,5 tonelada
Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.
Nintendo Entertainment System
O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.
Space Invaders
A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.
PDP-1
O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.
Música tema do Blanka
Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.
PC com barulho?
Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.
Inteligência artificial
O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.
Mario e seu bigode
O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.
Ultima Online
Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras
Pac Man
Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.
Space Invaders
O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.
Street Fighter 2
Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.
Asteroids
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.
Mouse
O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.