Como Criar Sites | Aprenda grátis como fazer seu site » Javascript

Criando layout tableless (div), com Ajax.

Raoni Novellino — Tue, 05 Jan 2010 20:09:39 +0000

Vamos fazer um site com Ajax, e para quem não souber o que é Ajax, vai um breve comentário.

Ajax significa Asynchronous Javascript And XML. Quer dizer que Ajax nada mais é do que uma capacidade (ferramenta, biblioteca), de fazer com que, em Javascript, eu possa fazer requisições HTTP (e, dependendo do navegador, posso fazer outros tipo de conexões). As requisições que o Ajax faz, podem ser síncronas ou assíncronas. Se for síncrona, o script ficará esperando o retorno da requisição para continuar a executar o seu código. Se for assíncrona, o script enviará a requisição e continuará a sua execução normalmente, e o retorno dessa requisição deverá ser tratado por uma outra função.

O XML nem sempre é usado para trafegar as informações em Ajax, mas como o nome já pegou, então ficou assim mesmo, mas podemos utilizar qualquer tipo de protocolo texto (como JSON), para trafegar as informações via Ajax.

O principal motivo para desenvolver uma página (web site) com Ajax, é faze-la ficar mais interativa com o usuário, mais dinâmica e criativa.

Para saber um pouco mais sobre Ajax, acesse AJAX (programação).

O Código HTML do Layout em Div

Vamos pegar o layout do post Definindo um Layout de Website sem Tabelas (Tableless), e retirar a parte mais a direita dele, para que a parte do meio do layout, contenha somente o menu e o miolo.

O código ficará como abaixo (arquivo index.html):





Exemplo Estrutura de Site Tableless









	
		Logo

		Aqui pode ser uma imagem de background e um texto.
	

	
		
			
				Principal
				Empresa
				Produtos

				Serviços
				Contato
			
		

		
			Seção 1
			Seção 2

			Seção 3
		

		
	

	
		
			Av. xxx yyy zzz, No 765

			Manaus - AM - CEP: 89000-000

			Email: seuemail@seudominio.com.br

Maiores explicações sobre o layout, pode encontrar no link passado para o post.

As únicas mudanças foram a parte direita do layout que foi deletada, os menus agora são links (tag com atributo onclick para chamada do Javascript), e foi inserida uma linha chamando o script script.js. Esse script contém a programação em Javascript para fazer a requisição em Ajax.

Uma outra mudança foi no arquivo de folhas de estilo estilo.css. Ele está sem os estilos da parte direita do layout e foi adicionado uma classe, para a frase que indica que o Ajax está carregando uma página, no nosso caso, a frase é simplesmente “Carregando…”, mas a classe está vazia, adicione os estilos que achar necessário.

O Código Javascript

O código Javascript precisa fazer tudo que o navegador faz automáticamente quando se coloca um link no web site: enviar a requisição, esperar pela resposta, pegar a resposta quando essa estiver pronta, tratar a resposta e exibir o que for necessário.

O código do arquivo script.js vai abaixo:

function getNewHttpRequest() {
	try {
		xmlhttp = new XMLHttpRequest();
	} catch(ee) {
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(E) {
				xmlhttp = false;
			}
		}
	}

	return(xmlhttp);
}

oAjax = getNewHttpRequest();

//Fila de conexões
fila = [];
ifila = 0;

// funcao para altear o conteudo do miolo
function ajaxHTMLmiolo(id, conteudo) {
	ajaxHTML(id, 'conteudo.php?conteudo='+conteudo);
}

//Executa a próxima conexão da fila
function ajaxRun() {
	//Abre a conexão
	oAjax.open("GET", fila[ifila][1], true);
	//Função para tratamento do retorno
	oAjax.onreadystatechange = function() {
		if (oAjax.readyState == 4) {
			//Mostra o HTML recebido
			retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
			document.getElementById(fila[ifila][0]).innerHTML = retorno;
			//Roda o próximo
			ifila++;
			if(ifila < fila.length) setTimeout("ajaxRun()", 20);
		}
	};

	//Executa
	oAjax.send(null);
}

function ajaxHTML(id, url) {
	//Carregando...
	document.getElementById(id).innerHTML=""+"Carregando...";
	//Adiciona à fila
	fila[fila.length] = [id, url];
	//Se não há conexões pendentes, executa
	if((ifila+1) == fila.length) ajaxRun();
}

Agora vamos as explicações.

Começando pela função getNewHttpRequest, que não recebe parâmetro, e retorna um objeto XMLHTTP. Esse objeto é o responsável pelas requisições que iremos fazer. Os blocos try {…} catch() {…}, tentam pegar o objeto XMLHTTP de várias formas, por causa das várias formas de pegar esse objeto de navegadores diferentes. Se não conseguir nenhuma, retorna false.

Abaixo pego o objeto XMLHTTP e coloco na variável oAjax e logo abaixo defino as minhas variáveis da fila de requisições.

Por que uma fila de requisições?

Tenho uma fila de requisições para organizar as minhas requisições Ajax, pois sem ela, se o usuário clicar em vários links antes de esperar a resposta de uma requisição, ou eu tenho que instanciar vários objetos do Ajax (XMLHTML), ou vai dar um erro no script que executa a requisição, quando uma outra requisição é feita antes de esperar a primeira terminar. A fila resolve esse problema, pois somente uma requisição é feita por vez, e se houver outra requisição na fila, ela é chamada logo após a requisição atual terminar.

A função ajaxHTMLmiolo serve para fazer uma requisição em Ajax que pega o conteúdo do miolo da página, que é o conteúdo da tag div que tem o atributo id igual a miolo, nesse layout é onde o conteúdo do web site será exibido. Essa função recebe dois argumentos, o primeiro é o id do elemento que vai ser exibido o resultado da requisição, o segundo é uma string que é enviada para o servidor para saber qual conteúdo buscar para exibir. Ela chama a função genérica de requisição Ajax, a ajaxHTML, que recebe o id do elemento que vais ser alterado e a URL que vai ser requisitada.

A função ajaxHTML coloca uma requisição na fila de requisições e tenta fazer essa requisição, se a fila estiver vazia, chamando a função ajaxRun, se não estiver vazia, ela não faz nada, pois assim que for a vez da requisição colocada, ela será feita.

A função ajaxRun pega a requisição que está na vez, na fila de requisições, e a executa, pelo método GET. A linha

	oAjax.open("GET", fila[ifila][1], true);

diz que é para abrir a conexão com a URL que está na fila, pelo método GET. O último parâmetro quer dizer que essa requisição tem que ser feita pelo modo assíncrono. Se o último parâmetro for false, a requisição seria feita no modo síncrono.

Para saber mais sobre o método GET, acesse Como Funciona os Métodos GET e POST – Diferenças.

Na linha

	oAjax.onreadystatechange = function() {

estou informando ao objeto que a função seguinte é a função que eu quero que ele execute quando o estado da minha requisição mudar. Essa função normalmente é chamada de função de callback, ela fica esperando algum evento acontecer para executar, sem interromper a execução do código. Nesse caso, ela espera o evento de alteração de estado da requisição ocorrer para ser chamada, logo, ela provavelmente será chamada mais de uma vez, pois durante uma requisição o estado muda algumas vezes.

Essa função de callback vai testar se o estado atual da requisição é o estado que eu quero, com a linha:

		if (oAjax.readyState == 4) {

O estado do objeto Ajax que eu quero é igual a 4, que é o estado onde a resposta foi lida por completo. Para ver uma lista dos estados do objeto Ajax, acesse XMLHttpRequest.

Após a resposta estar pronta, eu a pego e coloco em uma variável, fazendo uma substituição de todos os sinais de “mais” (’+'), por um espaço em branco. Se faz essa substituição, pois a resposta vem codificada como URL, e nessa codificação, os espaços são convertidos em sinais de “mais” (’+'). A linha que faz isso é a linha abaixo:

		retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
		document.getElementById(fila[ifila][0]).innerHTML = retorno;

A outra linha pega o elemento que tem o atributo id igual ao que foi passado para a requisição e coloca a resposta como conteúdo desse elemento, no caso do elemento em questão (div), faz o conteúdo ser exibido, mas pode ser feito para qualquer tipo de conteúdo, até um campo hidden (escondido) ou para preencher um selectbox.

		ifila++;
		if(ifila < fila.length) setTimeout("ajaxRun()", 20);

As linhas acima fazem o controle da fila, a primeira incrementa a posição da fila, fazendo a próxima requisição ser lida, se houver. A segunda linha verifica se o tamanho da fila é maior que a posição atual de leitura da fila, se for, é porque ainda existe requisição a ser feita, então ele programa um timer para em 20 milisegundos, para ser executada essa requisição.

Aqui termina a função de callback, ela será executada após o envio da requisição.

A última linha da função ajaxRun

	oAjax.send(null);

faz com que a requisição seja feita (enviada). O parâmetro dela, passado como null, indica que não estou enviando nada na requisição, porque já enviei o que eu queria pela URL passada.

O Código PHP

O código em PHP serve para fornecer o conteúdo requisitado pelo Ajax, perceba que a nossa URL da requisição Ajax tem como endereço o arquivo conteudo.php, lá na função ajaxHTMLmiolo, e o código desse arquivo (conteudo.php), vai abaixo:

Ele simplesmente pega o valor do “conteudo”, que foi passado pelo método GET (olha novamente a URL passada na função ajaxHTMLmiolo), e compara com as strings acima. Cada if faz ele colocar na variável $fileToRead um caminho para um arquivo. Na penúltima linha ele joga todo o conteúdo do arquivo para a variável $conteudoArquivo, e na última linha ele codifica para URL e imprime na “tela” com a função print. A impressão na tela, é a resposta que o Ajax pega. QUALQUER coisa que você imprima na tela, vai ser o retorno da sua requisição Ajax, até mesmo se der um erro no script PHP, caso esteja configurado para exibir o erro na tela, o Ajax vai pegar como retorno.

Não vou colocar o conteúdo dos arquivos HTML de resposta, mas você pode ver o exemplo todo rodando em http://www.comocriarsites.com/exemplos/SiteTablelessAjax/. Lá você mesmo pode pegar os arquivos HTML.

Função getElementById() do Javascript

Raoni Novellino — Wed, 08 Apr 2009 07:21:52 +0000

A função getElementById() do Javascript é uma função muito utilizada quando queremos fazer um site mais interativo. Essa função pode retornar o objeto de qualquer elemento na página que tenha um id único, e também funciona na maioria dos navegadores.

A função getElementById() do Javascript é bem fácil de usar, e é útil em muitas ocasiões. Vamos exemplificar algumas para melhor entendimento.

getElementById() para Tratamento e Envio de Formulário

Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:



	Exemplo de getElementById() no Formulário









Nome: 

Cargo:

Algumas pessoas que conhecem um pouco de Javascript podem dizer “eu posso fazer a mesma coisa com o onSubmit“, mas nós não estamos vendo o onSubmit e sim o getElementById().

Você pode ver esse exemplo da função getElementById() funcionando em Exemplo de getElementById() no Formulário.

No código acima temos um formulário HTML com dois campos e um botão de enviar, uma tag

para mensagem de erro e uma função Javascript identificada por teste_submit(). Quando o botão de enviar for pressionado, vai ser chamada a função Javascript teste_submit(). Essa função pega os objetos do formulário, dos campos do fomulário e do

, verifica se algum dos campos está vazio, e se algum deles estiver vazio, ele grava uma string em uma variável local (msg_erro) e depois faz essa string aparecer na tela. Se os dois campos não estiverem vazios, a função submete (envia) o formulário.

Os passos de pegar os objetos dos elementos do documento são feitos com a função getElementById(), que é uma função do documento, por isso tenho que colocar o document antes da função getElementById(). Como parametro da função getElementById() tenho que colocar o idetificador único do elemento, que se define pelo atributo id.

Se você está usando uma linguagem no lado do servidor (PHP, ASP ou outras), isso faz com que reduza a carga no servidor, pois tratamos certos erros antes de realmente enviar o formulário. E isso agiliza o processo para o cliente também, que não precisa esperar carregar uma nova página para saber que o formulário que ele tentou enviar está faltando alguma coisa ou está errado.

Popup com DIV sem Nova Janela (Float Popup)

Raoni Novellino — Sat, 21 Mar 2009 06:39:40 +0000

Nesse post vou mostrar como fazer uma janela popup sem que o navegador abra realmente uma nova janela, com a tag div. Isso é bom pois todos os navegadores hoje bloqueiam popup de nova janela, mas é muito díficil ter bloqueado o Javascript, que é o que utilizaremos também para fazer o div aparecer e desaparecer.

Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:

index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.

banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.

banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.

O Arquivo index.html

No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:

Mude a url no atributo src para a url correta onde está o arquivo banner.js.

Para chamar o arquivo banner.css, use a seguinte linha:

Mude a url no atributo href para a url correta onde está o arquivo banner.css.

Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag e ).

O Código HTML

No corpo do documento html (entre as tags e ), entra o código:


	
		
			 Fechar

A primeira linha é uma tag

, tem o atributo id igual a banner_popup – esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style – esse atributo define o estilo do nosso componente, no caso o div. Ele define que o

vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).

Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).

Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag

) HTML.

No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag . O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag , que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.

Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.

A Chamada Javascript

A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:

Esse código deve vir logo antes da tag , ou podemos colocar a função abre_banner() no atributo onload do próprio . Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.

O Arquivo index.html Completo



	Banner Popup

Fechar

O Arquivo banner.js

No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:

function fecha_banner()
{
	var banner_obj = document.getElementById('banner_popup');
	banner_obj.style.display = 'none';
}

function fecha_banner_timeout()
{
	setTimeout('fecha_banner()', 10000);
}

function abre_banner()
{
	var banner_obj = document.getElementById('banner_popup');

	banner_obj.style.left = '200px';
	banner_obj.style.top = '100px';

	banner_obj.style.display = '';

	fecha_banner_timeout();
}

A função fecha_banner()

A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).

A função fecha_banner_timeout()

A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.

A função abre_banner()

A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.

O Arquivo banner.css

No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:

.linksFechar:link
{
 	text-decoration: none;
	font-size: 14px;
	color: #000000;
}

Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.

E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.

Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.

Fazendo um Menu com MouseOver e MouseOut (Menu RollOver)

Raoni Novellino — Tue, 17 Mar 2009 18:37:05 +0000

Um menu RollOver é aquele menu que muda alguma coisa quando o mouse passa sobre um item do menu, normalmente muda as cores de fundo, mas pode mudar imagens também. Nesse post vou mostrar o código HTML para gerar o menu e também um pouco de Javascript que precisaremos para fazer a mudança.

Primeiro mostrarei o código, HTML, Javascript e um pouco de CSS. Depois vai as explicações e um exemplo de funcionamento.

Código HTML do Menu

Primeiro o código HTML do menu:

	
		
		PRINCIPAL

		
		A EMPRESA

		
		NOTÍCIAS

		
		BOLETINS

		
		ARTIGOS

		
		GALERIAS

		
		LINKS ÚTEIS

		
		FALE CONOSCO

Esse menu é feito sem tabela (tableless), que é um “novo” conceito de desenvolvimento de páginas. Para ser feito assim, normalmente usa-se muito a tag

. No código acima temos um

externo, que tem uma classe associada a ele, essa classe veremos na segunda parte do código. Dentro desse

externo, temos um

interno para cada item do menu. Cada

interno tem os atributos class, onmouseover e onmouseout, explicados abaixo:

class

- esse atributo é usado para definir uma classe de estilo (CSS) para uma tag, e todas as tags dentro dessa tag herdam parte desse estilo.

onmouseover

- esse atributo especifica uma ação a fazer quando o mouse passar por cima do que essa tag exibe, no nosso caso um item do menu. E esse atributo executa um script em Javascript, logo a função que está lá dentro (mouse_over_menu(this);) é uma função Javascript.

onmouseout

- esse atributo especifica uma ação a fazer quando o mouse sai de cima do que essa tag exibe, no nosso caso, quando o mouse sair de cima de um item do menu, esse atributo diz que é para executar a função “mouse_out_menu(this);“, essa é uma função Javascript.

Código CSS (estilos).

A seguir vem o código da classe de estilos (CSS):

O estilo para o identificador menu (#menu), define a largura (width), altura (height) e cor de fundo (background-color) do menu. Podemos ver que o

externo do nosso menu está com esse identificador (id=”menu’), Ele irá receber esses estilos para começar a construção do nosso menu rollover.

Para saber um pouco mais sobre folha de estilos (CSS) acesse: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Como vemos nos estilos acima, a única diferença entre as classe de estilo ItemOn e ItemOver é que o último tem uma imagem de fundo (background-image).

Agora a única coisa que falta fazer é o nosso código em Javascript para fazer a troca das classes de estilo dos itens do menu quando o mouse passar por cima ou sair de cime do item.

O Javascript do Menu

Como sempre, o código depois as explicações:

function mouse_over_menu(objDiv)
{
	objDiv.className = 'itemOver';
}

function mouse_out_menu(objDiv)
{
	objDiv.className = 'itemOn';
}

Vou explicar o básico sobre funções em Javascript. Para definir uma função em Javascript você deve escrever o cabeçalho da função seguido do corpo da função. No cabeçalho da função você deve colocar a palavra function seguida do nome da sua função (no caso das funções acima, mouse_over_menu e mouse_out_menu, respectivamente), seguido dos parametros passados para a função, entre parenteses.

O corpo da função deve estar todo entre chaves, e nele você coloca códigos Javascript para fazerem o que você quiser. No nosso menu, esse código vai apenas mudar a classe de estilo do objeto do elemento passado pelos parametros da função. Lá no nosso código HTML, podemos ver que foi passado um this como parametro da função, esse this indica que é para passar o objeto do elemento de onde a função está sendo chamada. No nosso caso, cada item do menu vai ser passado como um objeto Javascript para podermos modificar a sua classe.

O Código inteiro – Menu RollOver

Abaixo vai como ficaria o código inteiro do nosso menu rollover.










	
		
		PRINCIPAL

		
		A EMPRESA

		
		NOTÍCIAS

		
		BOLETINS

		
		ARTIGOS

		
		GALERIAS

		
		LINKS ÚTEIS

		
		FALE CONOSCO

Nesse link você pode ver esse código funcionando: Menu RollOver

Se gostou comente.

Pegando Posição Absoluta de um Elemento HTML (Javascript)

Raoni Novellino — Mon, 02 Mar 2009 06:36:42 +0000

Uma maneira simples de saber qual a posição absoluta de um elemento HTML (posição onde o elemento está em relação a área de exibição de páginas do navegador), é usando um algorítimo em Javascript. Esse algorítimo pega a posição relativa do elemento, e depois a posição relativa do elemento pai (parent), depois do pai do pai e assim até um elemento não ter um elemento pai.

O algorítimo:

function findPosX(obj)
{
	var curleft = 0;
	if(obj.offsetParent)
		while(1)
		{
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

São dois algorítimos, um para a posição horizontal (findPosX) e outro para a posição vertical (findPosY). Os dois recebem um atributo de nome obj que é o objeto do elemento que você quer saber a posição e retornam um inteiro, que é a posição do elemento no documento HTML.

As funções do Javascript offsetLeft e offsetTop, retornam um inteiro que é a distântcia em pixels entre o elemento passado como paramatro e o elemento pai desse elemento passado comoparametro. A diferença entre as duas é que a primeira (offsetLeft), retorna a distância da esquerda entre o elemento e seu elemento pai, e a segunda (offsetTop), retorna a distância de cima entre o elemento e seu elemento pai.

Abaixo um exemplo de uso:



	Teste de Posicionamento em Javascript






	
		Linha 1
	
	
		Linha 2
	
	
		
		
			
				Quero saber a posicao desse TD

Algumas explicações:

A linha “var td_pos_obj = document.getElementById(’td_posicao’);” faz a variável td_pos_obj ficar identificando o elemento que e quero saber a posição. Pode ver que na tag que eu quero saber a posição, tem um atributo id, com valor igual a td_posicao. Isso serve para eu identificar o elemento e depois poder saber qual ele é facilmente utilizando a função getElementById do Javascript. Essa função é boa porque funciona tanto no IE (acho que pelo menos no 6 e no 7) e no Firefox (testado na versao 2 e 3).

Se você quer saber a diferênça entre os valores do estilo (style) position, acesse: CSS Style Position: Diferença entre Relative, Absolute e Static