重要的CSS属性
对客户端程序员来说，最重要的css特性是那些指定文档中每个元素的可见性、尺寸和精确定位的属性。其他css属性允许指定堆叠次序、透明度、裁剪区域、外边距、内边距、边框和颜色。为了脚本化css，理解这些样式属性的工作原理是非常重要的。
重要的CSS样式属性
属性 描述 position 指定元素的定位类型 top、left 指定元素上、左边缘的位置 bottom、right 指定元素下、右边缘的位置 width、height 指定元素的尺寸 z-index 指定元素相对于其他重叠元素的“堆叠次序”，定义了元素定位的第三个维度 display 指定元素是否以及如何显示 visibility 指定元素是否可见 clip 定义元素的“裁剪区域”，只显示元素在区域内的部分 overflow 指定元素比分配的空间要大时的处理方式 margin, border, padding 指定元素的空白和边框 background 指定元素的背景颜色或图片 opacity 指定元素的不透明度（或半透明度），它是CSS3的属性，有些浏览器支持，IE中另有他法
用CSS定位元素
CSS的position属性指定了应用到元素上的定位类型，如下是4个可能出现的属性值:
static
默认属性。指定元素按照常规的文档内容流（对多数西方语言而言就是从左往右、从上到下）进行定位。静态定位的元素不能使用top、left和类似其他属性定位。欲对文档元素使用CSS定位技术，必先将其position属性设置为除此之外的其他3个属性值。
absolute
该值指定元素是相对于它包含的元素进行定位。相对于所有其他的元素，绝对定位的元素是独立定位的，它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素，要么是相对于文档本身。
fixed
该值指定元素是相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分而滚动。类似绝对定位的元素，固定定位的元素和所有其他元素是独立的，它不是文档流的一部分。大多数现代浏览器支持固定定位，除了IE 6。
relative
当position属性设置为relative，元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”。
一旦设置了元素的position属性为除了static以外的值，就可以通过元素的left、top、right和bottom属性的一些组合指定元素的位置。最常用的定位技术是使用left和top属性指定元素的左边缘到容器（通常是文档本身）左边缘的距离，元素的上边缘到容器上边缘的距离。例如，要放置一个距离文档左、上边缘各100像素的元素，可以在style属性中指定如下CSS样式：
<div style="position: absolute; left: 100px; top: 100px;">
如果元素使用绝对定位，它的top和left属性应该解释为它是相对于其p osition属性设置为除static值以外的祖先元素。如果绝对定位的元素没有定位过的祖先，则它的top和left属性使用文档坐标进行度量——就是相对于文档左上角的偏移量。如果你想相对于一个属于常规文档流中的容器绝对定位一个元素，则将容器的position指定为relative，top和left指定为0px。这就让容器变成了动态定位，但它仍留在文档流中原来的位置。任何绝对定位元素的子元素都相对于容器进行定位。
虽然使用left和top指定元素的左上角位置是最常见的定位方法，但也可以使用bottom和right指定元素相对于容器的下和右边缘进行定位。例如，让一个元素的右下角就在文档的右下角进行定位（假设元素没有嵌套在其他动态元素中），使用如下样式：
position: absolute; right: 0px; bottom: 0px;
定位一个元素让其右、上边缘相对于窗口右、上边缘各10像素，并且不随文档的滚动而滚动，可以使用如下样式：
position: fixed; right: 10px; top: 10px;
除了定位元素以外，CSS允许指定它们的尺寸。这通常通过指定width和height样式属性的值完成。例如，以下HTML代码创建了一个绝对定位的空元素。它的width，height和background-color属性使得它看上去显示为一个蓝色的小方块：
<div style="position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; background-color: blue"> </div>
另外一种指定元素的宽度的方法是同时指定left和right属性。同样，通过指定top和bottom属性来指定元素的高度。但是，如果同时指定left、right和width，那么width属性将覆盖right属性；如果元素的高度重复限定，height属性优先于bottom属性。
请牢记，没必要给每一个动态元素指定尺寸，某些元素（如图片）具有固有尺寸。而且，对包含文本或其他流式内容的动态元素通常指定想要的宽度就足够了，让元素内容布局来自动决定它的高度。
CSS指定位置和大小属性是有单位的。在上面的例子中，定位和尺寸属性值以“px”结尾，代表像素。也可以使用英寸（“in”）、厘米（“cm”）、点（“pt”）和字体行高（“em”，一种当前字体行高的度量）。
相对于使用上面的单位来指定绝对定位和尺寸，CSS也允许指定元素的位置和尺寸为其容器元素的百分比。例如，以下HTML代码创建了一个黑边框空元素，它的宽度和高度为其容器元素（或是浏览器窗口）的50%，居中显示：
<div style="position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border: 2px solid black"> </div>
第三个维度：z-index
如你所见，left、top、right和bottom属性是在容器元素中的二维坐标中指定X和Y坐标。z-index属性定义了第三个维度：它允许指定元素的堆叠次序，并指示两个或多个重疊元素中的哪一个应该绘制在其他的上面。z-index默认为0，可以是正或负的整数。当两个或多个元素重叠在一起时，它们是按照从低到高的z-index顺序绘制的。如果重叠元素的z-index值一样，它们按照在文档中出现的顺序绘制，也即最后一个重叠的元素显示在最上面。
注意，z-index只对兄弟元素（例如，同一个容器的子元素）应用堆叠效果。如果两个元素不是兄弟元素之间的重叠，那么设置它们的z-index属性无法决定哪一个显示在最上面。相反，“必须”设置这两个重叠元素的兄弟容器的z-index属性来达到目的。
非定位元素（例如，默认使用position: static定位）总是以防止重叠的方式进行布局，因此z-index属性不会应用到它们上面。尽管如此，它们默认的z-index值为0，这意味着z-index为正值的定位元素显示在常规文档流的上面，而z-index为负值的定位元素显示在常规文档流的下面。
CSS定位示例：文本阴影
CSS3规范包含一个
text-shadow属性以在文本下产生阴影效果。许多现在的浏览器都支持该效果，但是可以用CSS定位属性实现类似的效果，只要重复输出这段文本并重新定 义以下样式：<!-- text-shadow属性自动产生阴影效果 --> <span style="text-shadow: 3px 3px 1px #888">Shadowed</span> <!-- 这里我们利用定位可以产生相同的效果 --> <span style="position:relative;"> Shadowed <!-- 这里是投射阴影的文本 --> <span style="position:absolute; top：3px; left：3px; z-index:-1; color: #888"> Shadowed <!--这里是阴影--> </span> </span>
需要投射阴影的文本包裹在相对定位的
<span>标签中，不用设置其他定位属性，所以文本显示在其正常的位置上。阴影位于一个绝对定位的<span>中，它包含在上面那个相对定位的<span>中，这样z-index属性确保阴影在其文本的下面。