S1/使用HTML语言和CSS开发商业站点/08-定位网页元素

在CSS中有3种基本的定位机制，分别是标准流、浮动和绝对定位。通常在网页中除非专门指定某种元素的定位，否则所有元素都在标准流中定位，也就是说标准流中元素的位置由在XHML中的位置决定。

在前面的章节已经学习了标准流和浮动，使用浮动的方式可以定位网页元素。但是仅使用浮动一种方式，完成不了网页中很多更为复杂的网页效果。

Position属性

Position属性yufloat属性一样，都是CSS排版中非常重要的概念。Position从字面意思上看就是指定盒子的位置，指它相对父级的位置和相对它自身应该在的位置。position属性有4个属性值，这4个值分别代表着不同的定位类型。

Static：默认值，没有定位，元素按照标准流进行布局。

Relative：相对定位，使用相对定位的盒子位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离，相对定位的盒子仍在标准流中，他后面的盒子仍以标准流方式对待它。

Absolute：绝对定位，盒子的位置以包含它的盒子为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着他们对其后的其他盒子的定位没有影响，其他盒子就好像这个盒子不存在一样。

Fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

Fixed属性值目前在一些浏览器中还不被支持，在实际的网页制作中也不常应用，因此这里就不详细介绍了。

Static

Static为默认值，他表示盒子保持在原本应该在的位置上，没有任何移动的效果。因此，前面章节讲解的例子实际上都是static方式。

Relative

使用relative属性值设置元素的相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向使用left或right属性来指定，垂直方向使用top或bottom属性来指定。

这里用到了top和left两个CSS属性，前面已经提过在CSS中一共有4个属性配合position属性来进行定位，除了top和left外，还有right和bottom。这4个属性只有当position属性设置为absolute、relative或fixed时才有效。并且position属性取值不同时，它们的含义也是不同的。Top、right、bottom和left这4个属性除了可以设置为像素值，还可以设置为百分数。

相对定位元素的规律：

1、设置相对定位的盒子会相对他原来的位置，通过指定偏移，到达新的位置。

2、设置相对定位的盒子仍在标准流中，他对父级盒子和相邻的盒子都没有任何影响。

结论：设置了position属性的网页元素，无论是在标准流中还是在浮动时，都不会对他的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。

Absolute（绝对定位）

1、使用了绝对定位的元素以它最近的一个“已经定位”的“祖先”元素为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

2、绝对定位的元素从标准文档流中脱离，这意味着它们对其它元素的的定位不会造成影响。

关于上述第一条结论中，有两个带引号的定语，需要进行一些解释。

“已经定位”元素：position属性被设置，并且设置为除static之外的任意一种方式，那么该元素被定义为“已经定位”的元素。

“祖先”元素：就是从文档流的任意节点开始，走到根节点，经过的所有节点都是他的祖先，其中直接上级节点是它的父节点，以此类推。

结论：如果设置了绝对定位，而没有设置偏移量，那么他将保持在原来的位置。这个性质在网页中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。

Z-index属性

在CSS中，z-index属性用于调整元素定位时重叠层的上下位置。

Z-index属性在立体空间中表示垂直于页面方向的Z轴。Z-index属性的值为整数，可以是正数，也可以是负数。当元素被设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系。Z-index属性默认值为0，z-index值大的层位于其值小的层上方，当两个层的z-index值一样时，将保持原有的高低覆盖关系。

设置层的透明度

由于这两种方法在使用中存在浏览器兼容的问题，IE9、firefox、chrome、opera和safari使用属性opacity来设定透明度，IE8.0及更早的版本使用滤镜filter:alpha(opacity=x)来设定透明度。但是在实际网页制作中，并不能确定用户的浏览器，因此在使用CSS设定元素的透明度时，通常在样式表中同时设置这两种方法，以适应所有的浏览器。

由此可以知道，网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，这时所有层的z-index属性值总是0，如同页面中的图片层，下方文本层；另一个是设置绝对定位时所处的堆叠环境，这个环境所处的位置由z-index属性来指定，如同页面中的透明层和其上方的文本层，z-index值大的层覆盖值小的层。如果需要设置了绝对定位的层在没有设置绝对定位的层下方，只需要设置绝对定位的层的属性z-index值为负值即可。