内容优先，布局爱用 position

时下 web 风行标准，然而许多人目的并不明确，似乎是为了标准而标准。web 标准重要意义之一是提高可用性（usability）和易用性（accessibility）。考究网页布局的结构，内容的安排对可用性和易用性的影响，实际上也应该是 web 标准中的内容。

依本人个人看法，在 HTML/XHTML 的代码结构上，应该遵循内容优先的原则。举个简单的例子说明。在小屏幕设备上，普通网页的内容往往会很长。如果内容之前有长长的导航、广告等，用户阅读需要不断滚屏才能读到想要的内容。这绝对不是一个好的用户体验。

然后许多人并不使用内容优先的法则来编写（code）HTML/XHTML 代码。即使通晓内容优先的法则，人们最常见的做法是，把边栏放前，内容置后。这样做的好处是，可以方便的浮动（float）边栏，以适应布局的需要。这是最典型的为布局而布局，为标准而标准的做法。当然，边栏很少不足影响内容浏览体验的可以反驳我，仁者见仁。

我想举个例子，来证明使用内容优先的法则，在布局上并没有比其他结构更逊色，反而有更大灵活性。内容居中，两侧两栏？内容居左，右边两栏或相反？内容置于两栏之上？都没有问题！至于两栏置于内容之上，也不是不行，只是栏目的液态设计（liquid design）的灵活性受限而已。

我激昂地说到这里时，可惜的是，发现 IE6 的有严重的 bug，我的天！我只好把一个未成品展出，IE6 只能部分有效。IE5.x（有些小 bug，但不足影响布局），Opera 8.x，Gecko 1.x 都没有问题。这是不是让人更期待 IE 7？

进入样例查看，选择所愿的布局方式，看看使用 relative 跟 absolute 的强大灵活性。