第7章 网页制作-浮动与定位_教学设计(教案)
第7章 浮动与定位
child-02 在 文 档 流 中 的 位 置 仍 然 保 留
100px
150px
7.3 元素的定位
• 7.3.4 绝对定位absolute
让IT教学更简单，让IT学习更有效
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的 父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器 窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位 模式设置为绝对定位。如下图所示，即是一个相对定位的效果展示：
bottom
left 素下边线的距离
左侧偏移量，定义元素相对于其父元素左边线的距离 右侧偏移量，定义元素相对于其父元素右边线的距离
7.3 元素的定位
• 7.3.2 静态定位static
让IT教学更简单，让IT学习更有效
静态定位是元素的默认定位方式，当position属性的取值为static时，可 以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中 默认的位置。 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）
overflow属性的常用值
属性值 visible hidden auto 描述
让IT教学更简单，让IT学习更有效
内容不会被修剪，会呈现在元素框之外（默认值） 溢出内容会被修剪，并且被修剪的内容是不可见的 在需要时产生滚动条，即自适应所要显示的内容
scroll
溢出内容会被修剪，且浏览器会始终显示滚动条
让it教学更简单让it学习更有效overflow属性overflow属性的常用值属性值描述visible内容不会被修剪会呈现在元素框之外默认值hidden溢出内容会被修剪并且被修剪的内容是不可见的auto在需要时产生滚动条即自适应所要显示的内容scroll溢出内容会被修剪且浏览器会始终显示滚动条让it教学更简单让it学习更有效元素的定位1定位模式731元素的定位属性在css中position属性用于定义元素的定位模式其基本语法格式如下
网页设计基础浮动及定位教学案例-网页设计论文-设计论文
网页设计基础浮动及定位教学案例-网页设计论文-设计论文——文章均为WORD文档，下载后可直接编辑使用亦可打印——摘要：浮动与定位是《网页设计基础》课程中一个教学难点，为此，笔者以任务为导向，将任务层层分解，化繁为简，从而更好地让学生理解并掌握知识点。
关键词：HTML；浮动；定位1背景本教学单元的教学模式为项目导入、任务驱动和过程管理。
以网项目，贯穿到整个教学过程中，然后将整个项目进行分解，以任务为驱动，并在教学过程中，借鉴IT企业项目管理模式，对整个教学过程进行监控，确保完成教学目标。
2教学案例呈现2.1教学目标本次教学的知识目标要求学生掌握浮动、浮动塌陷、定位和浮动与定位的综合运用，重点是浮动与定位，难点是浮动塌陷以及浮动与定位的综合运用；能力目标要求学生具备相应的专业能力、方法能力和社会能力：在专业能力方面，具备web前端静态页面开发能力；在方法能力方面，具备对知识归纳的能力；在社会能力方面，具备有效地时间管理和准确的自我评价的能力。
素质目标要求学生具备积极的工作态度、团队合作能力。
从学生认知、能力结构和心理特征来看，当前大多数学生理解盒子模型和默认标准文档流，并能熟练运用，整体学习信心高昂，团体意识较强。
因此，为了实现本次教学目标，制定了课前预习作业；课中上机任务，并按学生水平采用分层教学；课后，布置课后作业，巩固知识。
2.2教学内容《网页设计基础》属于软件技术专业大一阶段的核心职业技术基础课程，是后续Web开发课程的基础前导课程。
本教学单元的学习任务是在前次教学单元完成的网页面的基础上，运用浮动和定位制作网商品详情页面。
地位：浮动与定位是本次教学单元重点与难点，是后期进行网页布局的核心基础知识点。
作用：浮动实现块级元素横向布局，定位实现页面元素精确定位。
前后联系：浮动与定位是对前驱知识的提升，后驱网页布局知识的核心。
选取理由：本次学习任务是浮动和定位综合运用，以任务驱动，让学生边做边学。
第7章浮动与定位
改变元素的位置。
3、相对定位
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，
（左）
（右）
知识引入
元素的定位属性 静态定位 相对定位 绝对定位 固定定位 z-index层叠等级属性
1、元素的定位属性
（1）定位模式 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{position:属性值;}
position属性的常用值有四个，分别表示不同的定位模式，具体如下表所示。
1、t属性值有三个，分别表示不同的含义，具体如下表所示。
属性值 left right none
描述 元素向左浮动 元素向右浮动 元素不浮动（默认值）
案例引入
由于浮动元素不再占用原文档流中的位置， 所以会对页面中其他元素的排版产生影响。如 果要避免这种影响，就需要对元素清除浮动。 本小节将通过清除浮动的方法制作一个“商品
所示。
边偏移属性 top
bottom left right
描述 顶端偏移量，定义元素相对于其父元素上边线的距离 底部偏移量，定义元素相对于其父元素下边线的距离 左侧偏移量，定义元素相对于其父元素左边线的距离 右侧偏移量，定义元素相对于其父元素右边线的距离
2、静态定位
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将 元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
讲解网页设计与制作的基本概念，如网页、网页设计、网页制作等。
介绍网页设计与制作的流程，包括需求分析、页面布局、页面设计、编码实现等。
2. HTML的基本语法和应用。
讲解HTML的基本语法，如标签、属性、注释等。
通过实例演示HTML在网页中的应用，如、段落、图片、等。
3. CSS的基本语法和应用。
讲解CSS的基本语法，如选择器、属性、注释等。
通过实例演示CSS在网页中的应用，如字体样式、颜色、布局等。
4. JavaScript的基本语法和应用。
讲解JavaScript的基本语法，如变量、运算符、注释等。
通过实例演示JavaScript 在网页中的应用，如动态修改内容、响应用户事件等。
5. 设计并制作一个简单的网页。
根据所学知识，设计并制作一个简单的网页，包括页面布局、页面设计、编码实现等。
三、教学方法1. 讲授法：讲解基本概念、语法和应用。
2. 演示法：通过实例演示HTML、CSS和JavaScript在网页中的应用。
3. 实践法：学生动手实践，设计并制作一个简单的网页。
四、教学环境1. 教室环境：多媒体教学设备、网络连接。
2. 软件环境：文本编辑器、浏览器、网页设计软件。
五、教学评价1. 课堂参与度：学生参与课堂讨论、提问和回答问题的情况。
2. 课后作业：学生完成课后作业的情况，包括网页设计作品的质量和完成时间。
3. 期末考试：考查学生对网页设计与制作的基本概念、语法和应用的掌握情况。
六、教学资源1. 教材：《网页设计与制作教程》2. 辅助材料：PPT课件、实例代码、教学视频3. 网络资源：在线教程、相关论坛、网页设计素材库七、教学安排1. 课时：共计32课时，每课时45分钟2. 课程安排：第1-4课时：网页设计与制作的基本概念和流程第5-8课时：HTML的基本语法和应用第9-12课时：CSS的基本语法和应用第13-16课时：JavaScript的基本语法和应用第17-20课时：设计并制作一个简单的网页3. 课后作业：每课时布置相应的课后作业，巩固所学内容八、教学策略1. 针对不同学生的学习基础，调整教学进度和难度，确保学生能够跟上课程节奏。
第7章 浮动与定位_教学设计概要
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称：HTML+CSS+JavaScript网页制作案例教程
授课年级：2015年级
授课学期：2015学年第二学期
教师姓名：某某老师
201 年月日
知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“运用clear 清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动”识点。
“违停查询”界面
鼠标移上“违停查询”界面时
总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“元素的定位属性、静态定位、相对定位、绝对定位、固定定位、z-index
讲解“元素的定位属性”
）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。
元素的定位属性主要包括定位模式和边偏移两部分。
下面，将进行具体讲解。
在文档流
中的位置仍然保留
100px 150px
child-02在
文
档
流
中的位置仍然保留
100px 150px
child-02。
《网页制作》教案
《网页制作》教案一、教学目标1. 了解网页制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和用法。
3. 能够独立制作并发布一个简单的网页。
二、教学内容1. 网页制作的基本概念和流程。
网页制作的目的是什么？网页由哪些基本元素组成？网页制作的流程是怎样的？2. HTML的基本语法和用法。
HTML是什么？如何编写一个简单的HTML文件？HTML的基本标签有哪些？3. CSS的基本语法和用法。
CSS是什么？如何为一个元素添加CSS样式？CSS的基本选择器有哪些？4. JavaScript的基本语法和用法。
JavaScript是什么？如何编写一个简单的JavaScript文件？JavaScript的基本语法有哪些？5. 制作并发布一个简单的网页。
如何使用HTML、CSS和JavaScript制作一个简单的网页？如何将网页发布到互联网上？三、教学方法1. 讲授法：讲解网页制作的基本概念和流程，HTML、CSS和JavaScript的基本语法和用法。
2. 实践法：引导学生动手实践，制作并发布一个简单的网页。
3. 问答法：通过提问和回答的方式，帮助学生巩固所学知识。
四、教学环境1. 教室环境：多媒体教学设备，网络连接。
2. 软件环境：文本编辑器（如Notepad++或Sublime Text），网页浏览器（如Chrome或Firefox），FTP客户端（如FileZilla）。
五、教学评价1. 课堂参与度：观察学生在课堂上的参与程度，提问和回答问题的积极性。
2. 作业完成情况：检查学生完成的网页制作作业，评估其对HTML、CSS和JavaScript的掌握程度。
3. 期末考试：设置一道关于网页制作的题目，测试学生对所学知识的综合运用能力。
六、教学资源1. 教材：推荐使用《HTML与CSS设计与构建网页》等权威教材。
2. 案例库：收集一些优秀的网页设计案例，用于分析和学习。
3. 在线资源：提供一些优秀的在线教程和工具，如w3schools、MDN Web Docs等。
第七章网页制作电子教案
第七章网页制作电子教案（计划8学时）第一次课（2学时）课题：§7.1了解网页设计与Dreamweaver 8课型：理论课、实践课、任务驱动多媒体教学教学目的与要求了解：1、了解Dreamweaver8的功能及特点。
2、了解网页、网站和网页的组成元素。
2、了解工作窗口的组成部分；掌握：1、熟练掌握Dreamweaver8软件的启动和退出,。
2、熟练掌握Dreamweaver8菜单的使用方法，重点与难点重点：1、网页、网站和网页的组成元素，Dreamweaver8窗口及菜单的使用方法。
难点：1、Dreamweaver8窗口及菜单的使用方法。
网页的设计理念。
教学进程组织教学复习提问引入新课讲授新课：7.1了解网页设计与Dreamweaver 87.1.1网页、网站和网页的组成元素网页是网站的基本信息单位，通常是由若干网页组成。
网站中主页是访问一个网站首先看到的网页也是所有页面的链接中心。
网页中包含的元素很多，主要包含以下元素：1、文本文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式，利用文本可以准确表达出网页想要传达的信息。
2、图形它可以是普通的绘制图形，可以是各种图像，还可以是动画。
图形不仅能提供更多的信息，还可以美化和装饰页面。
在网页上最常用的图像格式有GIF、JPEG等格式。
3、超级链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。
建立超级链接的对象可以是文本、图像、按钮或热点标记。
浏览时鼠标指向超级链接时就会变成伸出食指的右手形状，单击超级链接后即可打开目标对象。
超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。
4、表格表格不仅用来显示相关数据，而且用来控制网页中信息的布局方式。
控制图形、文字出现的位置，使之规范整齐、均衡协调。
5、表单6、声音声音是多媒体网页的一个重要组成部分。
浮动与定位_教学设计
传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师1201 年月日课题名称第6章浮动与定位计划课时8课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。
如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。
为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。
本章将对元素的浮动和定位进行详细讲解。
教学目标●理解元素的浮动，能够为元素设置浮动样式。
●熟悉清除浮动的方法，可以使用不同方法清除浮动。
●掌握元素的定位，能够为元素设置常见的定位模式。
重点及措施教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：元素的浮动属性float、overflow属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计与制作(HTML+CSS)》教学设计(教案)课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级授课学期：XX学年第一学期教师姓名：某某老师XX年XX月XX日课题名称第7章浮动与定位计划学时6 课时内容分析默认情况下，网页中的元素会在浏览器窗口中从上到下或从左到右一一罗列。
如果仅仅按照这种默认的方式进行排版，网页将会单调、混乱。
为了使网页的排版更加丰富、合理，在CSS中可以对元素设置浮动和定位样式。
本课程将对元素的浮动和定位进行详细讲解。
教学目标及基本要求要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，为后面学习网页布局打下良好的基础。
重点及措施教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。
难点及措施教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解教学过程第一课时（认识浮动、元素的浮动属性float）认识浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。
通过这样的布局制作出来的页面看起来呆板、不美观，然而大家在浏览网页时，会发现页面中的元素通常会按照左、中、右的结构进行排版，如下图所示。
通过这样的布局，页面会变得整齐、有节奏。
想要实现第二张图所示的效果，就需要为元素设置浮动。
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
元素的浮动属性float定义浮动在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：●left：元素向左浮动●right:元素向右浮动●none:元素不浮动（默认值）✧不设置浮动当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。
页面效果如下图所示。
可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占页面整行。
✧box01左浮动以box01为设置对象，对其应用左浮动样式，具体CSS代码如下：.box01 { /*定义box01左浮动*/ float:left;}保存HTML文件，刷新页面，效果如下图所示。
通过上图容易看出，设置左浮动的box01漂浮到了box02的左侧，也就是说box01不再受文档流控制，出现在一个新的层次上。
✧box02左浮动在上述案例的基础上，继续为box02设置左浮动，具体CSS代码如下：.box01,.box02{ /*定义box01、box02左浮动*/float:left;}保存HTML文件，刷新页面，效果如下图所示。
在上图中，box01、box02、box03三个盒子整齐地排列在同一行，可见通过应用“float:left;”样式可以使box01和box02同时脱离标准文档流的控制向左漂浮。
✧box03左浮动在上述案例的基础上，继续为box03设置左浮动，具体CSS代码如下：.box01,.box02,.box03{ /*定义box01、box02、box03左浮动*/ float:left;}保存HTML文件，刷新页面，效果如下图所示。
在上图中，box01、box02、box03三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。
float的另一个属性值“right”在网页布局时也会经常用到，他与“left”属性值的用法相同但方向相反。
✧注意对元素同时定义float和margin-left或margin-right属性时，在IE6浏览器中，出现的左外边距或右外边距将是所设置的margin-left或margin-right值的两倍。
这就是网页制作中经常出现的IE6双倍边距问题。
第二课时（清除浮动属性clear、常用的几种清除浮动的方法）清除浮动属性clear由于浮动元素不再占用原文档流的位置，所以他会对页面中其他元素的排版产生影响。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：选择器{clear:属性值;}在上面的语法中，clear属性的常用值有三个，分别表示不同的含义，具体如下：●left：不允许左侧有浮动元素（清除左侧浮动的影响）●right：不允许右侧有浮动元素（清除右侧浮动的影响）●both：同时清除左右两侧浮动的影响接下来对上面案例中的<p>标记应用clear属性，来清除周围浮动元素对段落文本的影响。
在<p>标记的CSS样式中添加如下代码：clear:left; /*清除左浮动*/添加该样式后，保存HTML文件，刷新页面，效果如下图所示。
常用的几种清除浮动的方法clear属性只能清除元素左右两侧浮动的影响。
然而在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，如下图所示父元素变成了一条直线。
这里为大家总结三种常用的清除浮动的方法。
✧使用空标记清除浮动在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr />等任何标记。
以上述案例为基础，在浮动元素box01、box02、box03之后添加class为box04的空div，然后对box04应用“clear:both;”样式。
这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。
由于上述方法在无形中增加了毫无意义的结构元素（空标记），因此在实际工作中不建议使用。
✧使用overflow属性清除浮动对元素应用“overflow:hidden;”样式，也可以清除浮动对该元素的影响。
继续以上述案例为基础，对父元素应用“overflow:hidden;”样式，来清除子元素浮动对父元素的影响。
这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。
✧使用after伪对象清除浮动after伪对象也可以清除浮动，该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。
继续以上述案例为基础，对父元素应用after伪对象样式，CSS代码如下：.father:after{ /*对父元素应用after伪对象样式*/ display:block;clear:both;content:"";visibility:hidden;height:0;}这时效果如下图所示。
在上图中，子元素浮动对父元素的影响已经不存在。
第三课时（overflow属性）overflow属性当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性，其基本语法格式如下：选择器{overflow:属性值;}在上面的语法中，overflow属性的常用值有visible、hidden、auto和scroll四个。
✧“overflow:visible;”样式设置“overflow:visible;”样式后，盒子溢出的内容不会被修剪，而呈现在元素框之外，如下图所示。
✧“overflow:hidden;”样式设置“overflow: hidden;”样式后，盒子溢出的内容将会被修剪且不可见，如下图所示。
✧“overflow:auto;”样式设置“overflow: auto;”样式后，元素框能够自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条。
当内容溢出时，如下图所示。
✧“overflow: scroll;”样式当定义overflow的属性值为scroll时，元素框中也会产生滚动条，如下图所示。
与“overflow: auto;”不同，当定义“overflow: scroll;”时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。
第四课时（元素的定位属性、常见的几种定位模式）元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。
✧定位模式在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;}在上面的语法中，position属性的常用值有四个，分别表示不同的定位模式，具体如下：●static：自动定位（默认定位方式）●relative：相对定位，相对于其原文档流的位置进行定位●absolute：绝对定位，相对于其上一个已经定位的父元素进行定位●fixed：固定定位，相对于浏览器窗口进行定位✧边偏移通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对他们的具体解释如下：●top：顶端偏移量，定义元素相对于其父元素上边线的距离●bottom：底部偏移量，定义元素相对于其父元素下边线的距离●left：左侧偏移量，定义元素相对于其父元素左边线的距离●right：右侧偏移量，定义元素相对于其父元素右边线的距离常见的几种定位模式✧静态定位静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，他会遵循默认值显示为静态位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
✧相对定位相对定位是将元素相对于他在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是他在文档流中的位置仍然保留。
如下图所示：在文档流中的位置仍然保留100px 150pxchild-02如上图中，对child02设置相对定位后，他会相对于其自身的默认位置进行偏移，但是他在文档流中的位置仍然保留。
✧绝对定位绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
如下图所示：100px150px在上图中，设置为绝对定位的元素child02，依据浏览器窗口进行定位。
并且，这时child03占据了child02的位置，即child02脱离了标准文档流的控制，不再占据标准文档流中的空间。