第17章 CSS控制元素的定位演示文稿.PPTVIP

第17章 CSS控制元素的定位 在CSS中，可以通过定位属性控制元素的显示位置。使用定位属性可以设置元素的重叠，相对位置等。也可以制作出各种特殊的显示效果。在CSS中，可以使用绝对定位属性值，和相对定位属性值对内容进行合理的安排，通过本章学习，应该掌握以下知识要点： 掌握元素定位的方法。 重点理解绝对定位和相对定位。 学会合理的重叠定位元素。 17.1 元素的定位 在网页中，如果元素中未定义任何定位和布局属性，元素会按照各自默认的方式排列。块元素会按照换行的方式显示，内联元素会按照同行的方式显示。通过使用定义属性，可以将元素定义到任何需要显示的位置。 17.1.1 元素的定位属性position 元素的定位属性（position），用来定义元素的定位方式。在定位属性中，可以使用4种属性值，分别为static、absolute、fixed、relative。 17.1.2 上边偏移属性top 元素的上边偏移属性（top），用来定义元素顶部偏移位置的大小。在上边偏移属性中，可以使用的属性值为默认、长度值、百分比，其语法结构如下所示。 17.1.3 右边偏移属性right 元素的右边偏移属性（right），用来定义元素右侧偏移位置的大小。在右边偏移属性中，可以使用的也是为默认、长度值、百分比，其语法结构如下所示。 17.1.4 下边偏移属性bottom 元素的下边偏移属性（bottom），用来定义元素底部偏移位置的大小。在下边偏移属性中，可以使用的属性值也有默认、长度值、百分比，其语法结构如下所示。 17.1.5 左边偏移属性left 元素的左边偏移属性（left），用来定义元素左边偏移位置的大小。在左边偏移属性中，可以使用的属性值也有默认、长度值、百分比，其语法结构如下所示。 17.2 绝对定位 绝对定位，用来确定元素相对定义父元素的绝对位置。在页面中，使用绝对定位的元素，会从文档中独立的显示出来，所以使用绝对定位的元素可能会遮盖其他的页面元素。下面分别进行讲解。 17.2.1 绝对定位与父元素 在使用绝对定位的时候，定位的参照元素，是包含定位属性的父元素。如果没有这样的父元素，则元素按照body元素的位置，确定显示位置。 17.2.2 绝对定位与相邻元素 在使用绝对定位的时候，绝对定位元素会独立显示，并不影响其他元素的显示位置（但是有可能覆盖其他元素）。与绝对定位元素相邻的元素，会忽略绝对定位元素的存在，按照各自的显示方式正常显示。 17.3 相对定位 相对定位，是按照元素自身所在的位置，使用边偏移属性重新定义元素的显示位置。使用相对定位的元素，依然是文档中的元素。元素的显示位置和元素所在文档中其他元素相互关联，其具体内容如下所示。 17.3.1 相对定位元素位置的确定 在确定相对定位元素位置的时候，首先要确定元素的原是位置，即元素在文档中的位置。然后根据边偏移属性中定义的偏移值，确定元素的最终位置。 17.3.2 相对定位与相邻元素 在使用相对定位的时候，相对定位元素保留原来所占有的空间，同时将自身按照边偏移属性中定义的属性值进行偏移（有可能覆盖其他元素）。与相对定位元素相邻的元素，会按照相对定位元素为普通元素的方式排列。 17.4 定位元素的重叠 在一个页面中，如果使用几个定位元素，就可能发生定位元素重叠的情况。默认的情况下，后添加的元素会覆盖先添加的元素。通过使用层叠定位属性（z-index），可以调整各个层叠元素的显示顺序，下面进行详细讲解。 17.5 本章习题 一．选择题。 二．填空题。 三．实战练习。