CSS定位
1.定位的定义
CSS中定位用position:static|relative|absolute|fixed来实现
static:1.正常流显示；2.不能通过z-index进行层叠分级；3.可设置width,height；4.设置top,right,bottom,left无效
relative:1.不脱离文档流，参考自身的静态位置，通过top,right,bottom,left进行定位；2.可通过z-index进行层叠分级；3.由于偏移可能会导致宽度、高度错位；建议设置偏移量后，重新设置元素的width,height属性；4.由于元素偏移，会导致后面的内容被覆盖，所以要想正常显示后面的内容，需要将后面内容作为一个层，然后设置这个层的margin-top:上方偏移元素的top值。
absolute:1.脱离文档流，通过top,right,bottom,left定位，它依赖其最近的父级元素定位，当父级position为static时，absolute元素将以body坐标原点进行定位；2.可通过z-index进行层叠分级。
fixed：1.固定定位，其所固定的对象是可视窗口，而并非是body或是父级元素；2.可通过z-index进行层叠分级。
z-index：auto | number；auto 遵从其父对象的定位； number为整数值，可正、负，当然值越大，层元素越靠上。
2.定位的原理
2.1可以位移的元素（相对定位）
在文本流中，任何一个元素都被文本流限制了自身的位置，但通过CSS可以改变这些元素的位置。我们通过float来让元素浮动；通过margin来让元素产生位置移动，但margin并非真实的位移，因为那只是位移的障眼法，而真正意义上的位移是通过top,right,bottom,left针对一个相对定位的元素所产生的。
（图1）
我们看到图1是一个宽度为200px，高度50px，margin:25px；border:25px solid #333; padding:25px;相对定位的元素，并且位移距上50px，距左50px。而下方是一个默认定位的黑色区块，我们看到这个处在文本流的区块被上面的相对定位元素挡住了一部分，这说明：当元素被设置成相对定位或绝对定位后，将自动产生层叠，他们层叠级别自然高于文本流，除非设置z-index值为负值，但在Firefox浏览器中z-index为负值时将不会显示。我们发现当相对定位元素位移后，表现内容已经脱离了文本流，只是在文本流中还为原来的相对定位留下了总宽与总高。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还有此相对定位的老窝。特别注意：1.实际应用中�
相关文档：
作为网页设计师(前端工程师)，你可能还记得曾经的那个网页大小建议:一个网页（包括HTML、CSS、Javacript、Flash和图
片）尽量不要超过30KB的大小，随着互联网的日益庞大，网络带宽也在飞速发展，很多设计师已经不再考虑这条30KB的理想准则。随着越来越受欢迎的
CSS布局和Javascript对网站用户体验的强化，使得这种现� ......
SEO主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有哪些影响呢？代码精简使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直� ......
SpriteMe是Google的一个开源项目，可以用来方便地找出一个页面中所使用的图片，然后可以将所以图片合并到一个“Sprite”图片，然后再通过
CSS控制调用哪一个区域，其提供了一个网站来安装，演示使用方法，http://spriteme.org/ 。
安装方法很简单，按照上面那个页面上的提示，将一个链接拖到“书签� ......
本文为大家收集精选了30个使用纯CSS
完成的强大实践的优秀CSS技术和实例
，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。
单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截� ......
