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?
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.
Recorde de patentes
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.
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.
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.
Playstation
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.
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.
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.
Tetris
O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo 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.
Senhas
Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.
Final Fantasy
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.
Galaxy Game
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.
Final Fantasy X
O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!
Mario em Donkey Kong
O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.
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.