CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。
为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数字较小的元素之上。
比方说，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌：
在这个例子中，我们采用了1-5五个连续的数字来表示堆叠次序，但是你也可以用五个不同的其他数字来取得同样的效果。这里的要点在于：用数字的大小次序反映希望的堆叠次序。
扑克牌这个例子的代码可以这样写：
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
显示示例
该方法虽然简单，但却能应付许多情况。你可以将图片叠加到文本之上，也可以将文本叠加到文本之上等等。
小结
层次可以应用于许多情况之下。例如，可以用z-index实现为标题（headline）增添效果（避免了采用图片的方式）。这样，一方面，装载文本的速度比图片要快；另一方面，采用文本可能更有利于提高网站的搜索引擎排名。
通常的我们在读取文章标题的时候，遇到字符过多，都是通过程序在SERVER端截取一定的字符数，然后添加...来实现标题长度截取的。其实我们也可以通过CSS来控制。
实列如下：
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
可用span或div� ......
我喜欢3栏布局的网页设计，但是3栏布局相对来说就比较复杂，有些难以控制，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。
首先，任何一个布局通常都有headers, navigation bars, content containers,
......
本人一般用editplus写一些小的测试代码或者来研究学习别人的代码，但经常会遇到这些问题：下载过来的HTML/CSS代码混乱，JS代码被压缩，或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然，对于代码的格式化和代码压缩等，我们都可以使用专有的工具，或者使用一些在线的工作来做，既然E ......
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：
举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：
如何实现这个效果？
上例的HTML代码如下所示：
<div i ......
