December 17, 2008
CSS 扫盲（七）：Position 属性
北极冰仔部落格独家 CSS 扫盲教程 - 第七期
这一期的主要内容是给大家介绍 CSS 中一个重要的属性：position（位置）。
一般情况下，HTML 页面上元素的布局由源代码中各元素的书写顺序决定，例如两个 div 容器，在源代码中靠前的在页面上呈现时一般也会靠前。但是我们不总是这样做，譬如为了 SEO，我们可能会将更重要的内容，如文章正文放置于页面代码相对靠前的地方，以保证搜索引擎蜘蛛可以一“进门”就看到“宝贝”，而不是长途跋涉、翻山越岭，经过一层层的抽丝剥茧终于看到文章本身。但是这样会产生一个矛盾，正文之前的东西放哪里？放在文章后面可以吗？
答案是：可以！我们的目标就是要实现在搜索引擎看到的页面上正文处于最前排，而普通用户浏览到的又是正常布局。幕后英雄正是 CSS 中的 position 属性。
position 属性共有 4 个可选项：static（静态）、relative（相对）、absolute（绝对）和 fixed（固定）。
一、static
虽然我们没有为每一个 HTML 元素指定 position 属性，但并不代表 position 属性不存在。static 是 position 属性的默认值，此时 HTML 元素会严格遵循浏览器为它分配的位置，而忽略掉任何指定 top、bottom、left、right 的值。
二、relative
相对，是相对于自身的标准位置而言。如果当我们设置某个元素的 position 属性为 relative，那么 left:20px 将在该元素标准位置的左方加入 20px 的偏移量实现位置的改变。top、bottom、right 同理。
三、absolute
绝对，当然也是相对的绝对。参考系不是宇宙中心，不是太阳，也不是地球，而是容纳该元素的页面（这样讲不完全准确，在 IE 7 和 Firefox 3 中测试 right 的结果证明这一点。但是我不知道怎样表达才更合适，当然它也不是相对于浏览器窗口的位置，fixed 才是。后面我给提供示例代码请大家自行测试）。position:absolute 参考系应该是最近一个定义了 position:relative/absolute 的父级元素的原点；如果没有任何父级元素定义了 position:relative/absolute 的话，才是浏览器文档的原点。这个差别很重要，利用这个特点，能做出许多更灵活的版面。（感谢 junyu 的纠正）
四、fixed
相对于浏览器窗口的固定位置，不因页面的滚动而改变。
五、特殊的 z-index
可以看作是 3D 中的 z 轴。默认值为 0，-1 表示处于后面一层，1 表示处于前面一层，其余同理。
看到这里，我们应该已经初步掌握了如何通过设置元素的 position 属性来改变它的位置，剩下的就是多加练习，熟能生巧。
附一：关于 absolute 属性的代码片段，注意测试浏览器窗口非最大化的情况。
<head>
<title>test page</title>
<style type="text/css">
#page {
background:#ffc;
width:900px;
height:900px;
margin:100px auto 0;
}
#header {
background:#ccc;
height:100px;
}
#banner {
background:#fcc;
width:315px;
height:25px;
font-size:11px;
margin:0;
padding:0;
/*
position:relative;
top:-25px;
left:585px;
*/
position:absolute;
top:0;
right:0;
}
#banner li {
display:inline;
margin:0 0 0 3px;
padding:0;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
</div>
<ul id="banner">
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</body>
</html>
附二：CSS 扫盲教程之前篇。
CSS 扫盲（一）：Padding
CSS 扫盲（二）：Syntax
CSS 扫盲（三）：怎样插入一个样式表
CSS 扫盲（四）：Background
CSS 扫盲（五）：制作漂亮的双引号引用标志
CSS 扫盲（六）：伪类
抢个沙发，好久没看你写这类文章了。
哈哈 我这里沙发很多 都不需要抢的
主要是现在没什么时间和内容写这些东西了吧
加油！
good!
@magicsim 其实我知道你是 Spammer，像你这样的留言是起不到 SEO 效果的，希望好自为之。
一直不敢用 positon 对她总是拿捏不准
@housne 确实难拿捏，有空我得再认真看看。
你对 absolute 的理解不大对, position:absolute 参考系应该是最近一个定义了 position:relative/absolute 的父级元素的原点; 如果没有任何父级元素定义了 position:relative/absolute 的话, 才是浏览器文档的原点. 这个差别很重要, 利用这个特点, 能做出许多更灵活的版面.
扫盲帖, 还是严谨点好.
@junyu 谢谢你的批评和纠正，我马上改过来。希望能多多指教。