项目六用定位控制网页.pptx

CSS+DIV网页布局技术教程

项目六用CSS定位控制网页CSS定义了position属性来控制网页元素的定位显示，它与float属性协同作用，实现了网页布局的精确性和灵活性高度统一。在本项目中，通过1个工作任务，向读者展示出CSS对电子相册的精确排版与定位。

目录任务制作电子相册

制作电子相册准备知识制作电子相册认识position静态定位绝对定位相对定位固定定位参照对象坐标值定位的特殊性层叠顺序嵌套层叠顺序CSS层叠框

1.认识position1.认识positionPosition的中文意思为位置，该属性的功能就是用来确定元素的位置，借助该属性可以把图片放置在栏目的右上角，或者是把置顶工具条始终固定在网页的顶部等。

2.静态定位2.静态定位静态定位能够根据元素或对象的这种自然顺序来定位元素的位置。例如，在下面的代码块中，如果没有特殊的CSS声明，它们都以静态定位确定自己的位置并进行显示。h1和h2按先后顺序排在一起，它们的位置始终位于divid=“pageHeader”对象包围区域这中，如下图所示。

3.绝对定位3.绝对定位当position属性的取值为absolute时，程序会把元素从文档流中拖出来，根据某个参照坐标来定位它的显示位置。例如，针对如下的结构，我们使用绝对定位的方法把元素h2从文档流中拖离出来，固定在窗(100px,100px)坐标位置，如下图所示。styletype=text/css

知识点链接绝对定位是网页精确定位的基本方法，如果结合left、right、top和bottom坐属性进行精确定位，结保z-index属性排列元素的覆盖顺序，结合clip和visiblit属性裁切、显示或隐藏元素对象或部分区域，就可以设计出更强大的风页布局效果。

4.相对定位4.相对定位相对定位是一种折中的定位方法，是在静态定位和绝对定位之间取一个平衡点。所谓相对定位，就是使被应用的元素不脱离文档流，却能够通过坐值以原始位置为参照物进行偏移。

5.固定定位5.固定定位固定定位是绝对定位的一种特殊形式，它是以浏览器窗口作为参照物来定义网页元素的。如果定义某个元素固定显示，则该元素不受文档流的影响，也不受包含块的位置影响，它始终以浏览器窗口来定位自己的显示位置。不管浏览器滚动条如何滚动，也是不管浏览器窗口大小变化，该元素都会显示在浏览口内。

6.参照对象6.参照对象在默认状态下，绝对定位网页中的某个元素时，浏览器都是以网页的边框来定位的。更准确地说，浏览器是以窗口的边框来进行定义的，不受body元素的边距影响。

7.坐标值7.坐标值为了灵活定位页面元素，CSS定位了4个坐标属性，top、right、bottom和left，通过些属性的联合使用，可以以包含块的4个内顶角来定位元素在页面中的位置。

8.定位的特殊性8.定位的特殊性相对定位元素能够随文档流自由流动，绝对定位元素脱离文档流，不再受文档流的影响，但是当绝对定位元素没有被显示指明坐标时，这种情况会发生变化。

9.层叠顺序9.层叠顺序CSS通过z-index属性来排列不同定位元素之间的层叠顺序。该属性可以设置为任意整数值，数值越大，所排列的顺序就越靠上。

10.嵌套层叠顺序10.嵌套层叠顺序在CSS定位中不有一个很奇怪的现象，这种现象目前仅在IE浏览器中存在。即当定位元素位于HTML不同结构层次时，所定位的元素的层叠级别存在很大差异，甚至无法进行比较。

11.CSS层叠框11.CSS层叠框z-index属性用来定位布局中确定元素的层叠顺序，适用于定位元素，即position属性值为relative、absolute和fixed的对象。当一个元素被定位之后，它就归属于某个StackingCntext（层叠关系）。所谓层叠关系，就如同包含块一样，也可以通俗地说成叠层包含框，它是层叠定位的一个参考平台。在某个层叠包含框内部的所有定位元素都可以在同一个平台上比较定位自己的z轴坐标。

任务实施周康是某网页设计公司的后台开发人员，接到主管任务，他需要制作电子相册网页。要求显示出详细信息模式。制作电子相册任务：制作电子相册

任务分析：理解牢记！用CSS定位可以实现精确控制风页对象，用户能够借助CSS定位属性精确定位网页中每个元素的位置（可精确到像素级别）。因此，周康决定使用CSS排版布局与定位来完成此任务。任务：制作电子相册

任务实施制作电子相册

（1）对每一幅相片以及它的相关信息都用一个div块进行分离，并且根据相机的横、竖设置相应的CSS类别。divclass=picpt ahref=photo/04.jpgclass=tnimgsrc=photo/thumb/04.jpg/a ul liclass=title影子/li