<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Como Criar Sites &#124; Aprenda grátis como fazer seu site &#187; style top</title>
	<atom:link href="http://www.comocriarsites.com/tag/style-top/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.comocriarsites.com</link>
	<description>Aprenda a criar sites, html e manhas para fazer seu site.</description>
	<lastBuildDate>Wed, 06 Jan 2010 12:51:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS Style Position: Diferença entre Relative, Absolute e Static</title>
		<link>http://www.comocriarsites.com/html-css/css-style-position-diferenca-entre-relative-absolute-e-static/</link>
		<comments>http://www.comocriarsites.com/html-css/css-style-position-diferenca-entre-relative-absolute-e-static/#comments</comments>
		<pubDate>Tue, 03 Mar 2009 20:17:57 +0000</pubDate>
		<dc:creator>Raoni Novellino</dc:creator>
				<category><![CDATA[HTML CSS]]></category>
		<category><![CDATA[absolute]]></category>
		<category><![CDATA[criar site]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[fazer site]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[position]]></category>
		<category><![CDATA[relative]]></category>
		<category><![CDATA[site]]></category>
		<category><![CDATA[static]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[style bottom]]></category>
		<category><![CDATA[style left]]></category>
		<category><![CDATA[style right]]></category>
		<category><![CDATA[style sheet]]></category>
		<category><![CDATA[style top]]></category>

		<guid isPermaLink="false">http://www.comocriarsites.com/?p=45</guid>
		<description><![CDATA[Um estilo que eu uso muito é o position, ele me permite colocar um elemento exatamente onde eu quero no documento html. Vou explicar a diferença dos valores possíveis do estilo position (static, relative e absolute) e dar um exemplo de funcionamento. Existe um outro valor posível para o estilo position que é o fixed, [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-size: xx-large;">U</span>m estilo que eu uso muito é o <strong><em>position</em></strong>, ele me permite colocar um elemento exatamente onde eu quero no documento html. Vou explicar a diferença dos valores possíveis do estilo <strong><em>position</em></strong> (<em>static, relative e absolute</em>) e dar um exemplo de funcionamento. Existe um outro valor posível para o estilo <em><strong>position</strong></em> que é o <em>fixed</em>, mas ele só funciona no Internet Explorer e não deve ser utilizado.</p>
<h2>Style Position: Static</h2>
<p><em>Static</em> é o valor padrão do estilo <strong><em>position</em></strong> dos elementos de um documento html. Se você não definir o estilo <strong><em>position</em></strong>, ele será <em>static</em>. Esse <em>static</em> quer dizer que o elemento será renderizado no navegador de acordo com o local onde ele está no código, seguindo o fluxo padrão da página. Com valor <em>static</em> do estilo <em><strong>position</strong></em>, o elemento não segue estilo como <em><strong>left</strong></em>, <strong><em>right</em></strong>, <strong><em>top </em></strong>e <strong><em>bottom</em></strong>.</p>
<h3>Exemplo de Position Static:</h3>
<div style="background-color: #FFFFFF; overflow-x: auto;">
<pre>&lt;table&gt;
	&lt;tr&gt;
		&lt;td&gt;
		&lt;span&gt;normal position (static)&lt;/span&gt;
		&lt;span style="position: static; top: 30px; left: 80px;"&gt;Position Static.&lt;/span&gt;
		&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</pre>
</div>
<h2>Style Position: Relative</h2>
<p>Quando um estilo (<em>style</em>) está em <em>relative</em>, o valor da posição normal do elemento é adicionada a qualquer valor de estilos <em><strong>left</strong></em>, <em><strong>right</strong></em>, <em><strong>top </strong></em>e <em><strong>bottom</strong></em>. Isso quer dizer que se o elemento é renderizado normal na posição 100 x 100, e você colocar estilo <strong><em>left</em></strong> igual a 30 pixels e <strong><em>top</em></strong> igual a 50 pixels, o elemento vai ser posicionado com 130 pixels para esquerda (<strong><em>left</em></strong>) e 150 pixels do topo (<strong><em>top</em></strong>).</p>
<h3>Exemplo de Position Relative:</h3>
<div style="background-color: #FFFFFF; overflow-x: auto;">
<pre>&lt;table&gt;
	&lt;tr&gt;
		&lt;td&gt;
		&lt;span&gt;normal position (relative)&lt;/span&gt;
		&lt;span style="position: relative; top: 50px; left: 100px;"&gt;Position Relative.&lt;/span&gt;
		&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</pre>
</div>
<h2>Style Position: Absolute</h2>
<p>Quando um elemento está com o estilo <strong><em>position</em></strong> com valor <em>absolute</em>, ele será posicionado exatamente nos pixels que os estilos <strong><em>left</em></strong>, <strong><em>right</em></strong>, <strong><em>top </em></strong>e <strong><em>bottom</em></strong> definirem. Se um elemento com <strong><em>position</em></strong> <em>absolute</em> está na posição 100 x 100, e é colocado os estilos <em><strong>left</strong></em> igual a 30 pixels e <strong><em>top</em></strong> igual a 50 pixels, o elemento vai ser posicionado com 30 pixels da esquerda (<strong><em>left</em></strong>) e 50 pixels do topo (<em><strong>top</strong></em>).</p>
<h3>Exemplo de Position Absolute:</h3>
<div style="background-color: #FFFFFF; overflow-x: auto;">
<pre>&lt;table&gt;
	&lt;tr&gt;
		&lt;td&gt;
		&lt;span&gt;normal position (absolute)&lt;/span&gt;
		&lt;span style="position: absolute; top: 30px; left: 80px;"&gt;Position Absolute.&lt;/span&gt;
		&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</pre>
</div>
<p>Para você vizualizar os exemplos acima bem, coloque-os todo em um mesmo documento html e verifique o que cada um faz com o texto deles.</p>
<p>Para um guia completo de CSS (Cascading Style Sheets):</p>
<p><a href="http://www.w3schools.com/CSS/default.asp">http://www.w3schools.com/CSS/default.asp</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.comocriarsites.com/html-css/css-style-position-diferenca-entre-relative-absolute-e-static/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
