任务3.5采用定位属性进行网页布局.pptxVIP

任务3.5采用定位属性进行网页布局;任务介绍;任务分析;;静态定位是position属性的默认值，即该元素出现在文档的常规位置，不会重新定位。通常此属性可以不设置，除非是要覆盖以前的定义。

【课堂案例3.5.1】假设有这样一个页面布局，页面中分别定义了id=box的容器又包含id=box-1、id=box-2和id=box-3这3个子盒子，彼此也是并列关系。编写相应的CSS样式，效果如图所示。

;

此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，偏移不影响文档流中的其它元素，是通过设置水平或垂直位置的值，让这个元素“相对于”它原始的起点进行移动。

【课堂案例3.5.2】针对课堂案例3.5.1深入讨论，将id=box-2向下移动50px，向右移动50px。编写相应的CSS样式，效果如图所示

;此属性值的设置元素脱离文档流，会对文档流中其它元素布局产生影响,使用绝对定位的对象可以被放置在文档中任何位置，位置将依据浏览器左上角的0点开始计算。

【课堂案例3.5.3】针对课堂案例3.5.1深入讨论，将id=box-2进行绝对定位，向下移动50px，向右移动200px。编写相应的CSS样式，显示的效果如图所示。改成bottom:0px;right:0;效果如何？

;;固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当页面长度超出浏览器窗口时，页面会出现滚动条，绝对定位下的元素会随着页面一起移动，而固定定位下的页面元素不会随着页面滚动，会始终显示在浏览器窗口的固定位置。;; 1）绝对定位以整个网页内容为参照物，通过top、left、right、bottom设置标签相对于参照物偏移的距离。

2）相对定位以该标签原位置为参照物。

3）固定定位以浏览器的窗口为参照物。

4）如果绝对定位的标签的父标签也设置了定位属性，这时绝对定位标签不再以整个网页为参照物，而是以父标签为参照物。

;元素的溢出