无意中看到此文，因作者强调其中避开了浏览器bug/分歧，所以个人认为值得借鉴。
不才仔细看了此文，自觉受益匪浅
，屡试不爽，佩服作者对css布局的精炼总结，顺便小译了一段，
英文水平有限，且个人通常写写php，对css了解不深却有点兴趣，错误之处还请指正。
个人没有空间，代码中的css文件和js保留了完整路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/
原文地址：http://www.barelyfitz.com/screencast/html-training/css/positioning/
代码
不才仔细看了此文，自觉受益匪浅
，屡试不爽，佩服作者对css布局的精炼总结，顺便小译了一段，英文水平有限，且个人通常写写php，对css了解不深却有点兴趣，错误之处还请指正。
个人没有空间，代码中的css文件和js保留了完整路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/
原文地址：http://www.barelyfitz.com/screencast/html-training/css/positioning/
如有转载，请注明原文出处，译过的就在这里了
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>10步掌握CSS定位: position static relative absolute float</title>
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" />
<style type="text/css" media="screen">
#example {
float:right;
}
#example div {
}
#div-before, #div-after {
background-color:#eee;
color:#000;
}
#div-1 {
width:400px;
background-color:#000;
color:#fff;
}
#div-1-padding {
padding:10px;
}
#div-1a {
background-color:#888;
color:#fff;
}
#div-1b {
background-color:#666;
color:#fff;
}
#div-1c {
background-color:#aaa;
color:#fff;
}
#example div p {
margin:0 .25em;
padding:.25em 0;
}
#description {
float:left;
width:40%;
}
pre {
padding:1em;
border:1px dashed #aaa;
background:#fafafa;
}
p {
margin:0.5em 0;
}
h3 {
color:#999;
}
</style>
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" />
<script type="text/javascript">
function chooseStyle(title)
{
setActiveStyleSheet(title);
}
var tabberOptions = {
onTabClick:
function(tabIndex)
{
chooseStyle(tabIndex+1);
}
};
</script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script>
<script type="text/javascript">
/* If the user has javascript, temporarily set the .tabber class to
display:none */
//document.write(unescape('%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20display%3Anone%3B%20%7D%0A%3C/style%3E%0A'));
</script>
</head>
<body >
<table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td id="block_left_kludge"></td>
<td id="block_middle" width="100%" rowspan="2">
<div id="content">
<h1>10步掌握CSS定位: position static relative absolute float</h1>
<div id="description">
<div class="tabber">
<div id="text-1" class="tabbertab" title="1">
<h2>1. position:static</h2>
<p>元素的 position 属性默认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p>
<p>通常此属性值可以不设置，除非是要覆盖之前的定义。</p>
<pre>#div-1 {
position:static;
}
</pre>
</div>
<div id="text-2" class="tabbertab" title="2">
<h2>2. position:relative</h2>
<p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的常规位置。</p>
<p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p>
<pre>#div-1 {
position:relative;
top:20px;
left:-40px;
}
</pre>
<p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p>
<p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。</p>
</div>
<div id="text-3" class="tabbertab" title="3">
<h2>3. position:absolute</h2>
<p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p>
<p>例如将 div-1a 放置到右上角：</p>
<pre>#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
<p>注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p>
<p>div-1a 被放置在页面的右上角。 能直接地定位元素很方便，但作用也不大。</p>
<p>这里真正要做的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative 属性了。</p>
<h3>注</h3>
<ul>
<li>IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li>
</ul>
</div>
<div id="text-4" class="tabbertab" title="4">
<h2>4. position:relative + position:absolute</h2>
<p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p>
<pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
</div>
<div id="text-5" class="tabbertab" title="5">
<h2>5. 两列绝对定位</h2>
<p>接下来使用relative 和absolute 实现两列的绝对定位：</p>
<pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
<p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p>
<p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p>
</div>
<div id="text-6" class="tabbertab" title="6">
<h2>6. two column absolute height</h2>
<p>一种办法是设置固定高度。</p>
<p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p>
<pre>#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
</div>
<div id="text-7" class="tabbertab" title="7">
<h2>7. float(浮动)</h2>
<p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p>
<p>可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。</p>
<pre>#div-1a {
float:left;
width:200px;
}
</pre>
</div>
<div id="text-8" class="tabbertab" title="8">
<h2>8. 多列浮动</h2>
<p>将两列都像左浮动，可以实现两列并列。</p>
<pre>#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
</pre>
</div>
<div id="text-9" class="tabbertab" title="9">
<h2>9. 多列浮动后清除浮动</h2>
<p>将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。</p>
<pre>#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
</pre>
</div>
<div id="text-10" class="tabbertab" title="10">
<h2>10. Disclaimer & Resources</h2>
<p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are <em>many</em>).</p>
<p>The following page was invaluable:<br />
<a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p>
<p>While you're here check out the following:</p>
<ul>
<li><a href="http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li>
<li><a href="http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li>
</ul>
</div>
</div>
<!-- /class=tabber -->
</div>
<!-- /id="description -->
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>10步掌握CSS定位: position static relative absolute float</title>
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" />
<style type="text/css" media="screen">
#example {
float:right;
}
#example div {
}
#div-before, #div-after {
background-color:#eee;
color:#000;
}
#div-1 {
width:400px;
background-color:#000;
color:#fff;
}
#div-1-padding {
padding:10px;
}
#div-1a {
background-color:#888;
color:#fff;
}
#div-1b {
background-color:#666;
color:#fff;
}
#div-1c {
background-color:#aaa;
color:#fff;
}
#example div p {
margin:0 .25em;
padding:.25em 0;
}
#description {
float:left;
width:40%;
}
pre {
padding:1em;
border:1px dashed #aaa;
background:#fafafa;
}
p {
margin:0.5em 0;
}
h3 {
color:#999;
}
</style>
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" />
<script type="text/javascript">
function chooseStyle(title)
{
setActiveStyleSheet(title);
}
var tabberOptions = {
onTabClick:
function(tabIndex)
{
chooseStyle(tabIndex+1);
}
};
</script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script>
<script type="text/javascript">
/* If the user has javascript, temporarily set the .tabber class to
display:none */
//document.write(unescape('%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20display%3Anone%3B%20%7D%0A%3C/style%3E%0A'));
</script>
</head>
<body >
<table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
<td id="block_left_kludge"></td>
<td id="block_middle" width="100%" rowspan="2">
<div id="content">
<h1>10步掌握CSS定位: position static relative absolute float</h1>
<div id="description">
<div class="tabber">
<div id="text-1" class="tabbertab" title="1">
<h2>1. position:static</h2>
<p>元素的 position 属性默认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p>
<p>通常此属性值可以不设置，除非是要覆盖之前的定义。</p>
<pre>#div-1 {
position:static;
}
</pre>
</div>
<div id="text-2" class="tabbertab" title="2">
<h2>2. position:relative</h2>
<p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的常规位置。</p>
<p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p>
<pre>#div-1 {
position:relative;
top:20px;
left:-40px;
}
</pre>
<p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p>
<p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。</p>
</div>
<div id="text-3" class="tabbertab" title="3">
<h2>3. position:absolute</h2>
<p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p>
<p>例如将 div-1a 放置到右上角：</p>
<pre>#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
<p>注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p>
<p>div-1a 被放置在页面的右上角。 能直接地定位元素很方便，但作用也不大。</p>
<p>这里真正要做的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative 属性了。</p>
<h3>注</h3>
<ul>
<li>IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li>
</ul>
</div>
<div id="text-4" class="tabbertab" title="4">
<h2>4. position:relative + position:absolute</h2>
<p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p>
<pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
</div>
<div id="text-5" class="tabbertab" title="5">
<h2>5. 两列绝对定位</h2>
<p>接下来使用relative 和absolute 实现两列的绝对定位：</p>
<pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
<p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p>
<p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p>
</div>
<div id="text-6" class="tabbertab" title="6">
<h2>6. two column absolute height</h2>
<p>一种办法是设置固定高度。</p>
<p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p>
<pre>#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
</div>
<div id="text-7" class="tabbertab" title="7">
<h2>7. float(浮动)</h2>
<p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p>
<p>可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。</p>
<pre>#div-1a {
float:left;
width:200px;
}
</pre>
</div>
<div id="text-8" class="tabbertab" title="8">
<h2>8. 多列浮动</h2>
<p>将两列都像左浮动，可以实现两列并列。</p>
<pre>#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
</pre>
</div>
<div id="text-9" class="tabbertab" title="9">
<h2>9. 多列浮动后清除浮动</h2>
<p>将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。</p>
<pre>#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
</pre>
</div>
<div id="text-10" class="tabbertab" title="10">
<h2>10. Disclaimer & Resources</h2>
<p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are <em>many</em>).</p>
<p>The following page was invaluable:<br />
<a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p>
<p>While you're here check out the following:</p>
<ul>
<li><a href="http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li>
<li><a href="http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li>
</ul>
</div>
</div>
<!-- /class=tabber -->
</div>
<!-- /id="description -->
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>