《网页设计与制作项目教程》-任务11首页banner板块的设计与制作

任务11

首页banner板块的设计与制作任务

本任务案例结构上比较简洁，但是涉及的CSS知识点非常全面。通过完成“学习党的二十大精神专题网”首页banner板块的设计与制作，要求熟练掌握使用定位实现各种排版需要。效果如图所示。任务11首页banner板块的设计与制作首页banner板块效果任务11首页banner板块的设计与制作知识目标技能目标素质目标（1）掌握定位属性。（2）掌握定位方式。（3）掌握z-index层叠等级属性。（1）能够灵活使用定位进行页面布局。（2）能够在设计中解决样式冲突问题。（1）掌握并遵循Web开发标准。（2）培养分析问题和解决问题的能力。（3）培养团队协作精神。元素的定位定位的分类任务实现任务11首页banner板块的设计与制作1.元素的定位1.1元素的定位任务11首页banner板块的设计与制作

在CSS页面布局时，通过position属性来设置元素的定位模式。语法格式如下：

其中，static表示静态定位，是默认的定位方式；relative表示相对定位，相对于其标准流的位置进行定位；absolute表示绝对定位，相对于其上一个已经定位的父元素进行定位；fixed表示固定，相对于浏览器窗口进行定位；sticky表示粘性定位，会根据用户的滚动位置进行定位。

position:static|relative|absolute|fixed|sticky;1.1元素的定位在确定了定位模式后，还要配合偏移的边缘性来定义元素的具体位置，在CSS中主要通过top、right、bottom和left来精确定义定位元素的位置，具体含义如表所示：1.元素的定位clear的属性值及其含义值含义top规定元素的顶部边缘，定义元素相对于其父元素上边线的距离right右侧偏移，定义元素相对于其父元素右边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离元素的定位定位的分类任务实现任务11首页banner板块的设计与制作2.定位的分类任务11首页banner板块的设计与制作2.1相对定位relative2.2绝对定位absolute2.3固定定位fixed2.4粘性定位sticky2.5定位元素的堆叠2.1相对定位relative

使用相对定位的元素，会相对于自身原本的位置，通过偏移制定的距离，到达新的位置。

使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量，其中水平方向的偏移量由left和right属性指定；竖直方向的偏移量由top和bottom属性指定。

相对定位元素不会脱离原来的标准流，在标准流中所占的空间不会改变。2.定位的分类2.2绝对定位absolute2.定位的分类当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。使用绝对定位的元素是以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。

绝对定位元素完全脱离原来的标准流，也就不会占有原来标准流中的空间，和浮动类似。它的特点在于当绝对定位元素发生位移时，原先初始位置的内容如同被去除了一样，这个元素对立于其他页面内容，而初始位置的空白被其他内容填补。元素绝对定位后生成一个块级框，而不论原来它是何种类型元素。2.3固定定位fixed2.定位的分类当position属性的取值为fixed时，可以将元素的定位模式设置为固定定位。固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。固定定位元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

固定定位元素与绝对定位元素一样会脱离原来的标准流。低版本的IE浏览器不支持固定定位。2.4粘性定位sticky2.定位的分类当position属性的取值为sticky时，可以将元素的定位模式设置为粘性定位。粘性定位可以被认为是相对定位和固定定位的混合。

元素会根据用户的滚动位置进行定位，它开始会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其固定（粘贴）在指定的目标位置。也就是表现为在跨越特定偏移值前为相对定位，之后为固定定位。

使用top、right、bottom或left之一来设置偏移量，粘性定位就会生效，否则与相对定位相同。InternetExplorer，Edge15及更早IE版本不支持sticky定位。2.5定位元素的堆叠2.定位的分类当多个元素同时设置定位时，定位元素之间有可能发生重叠，在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，属性值不带单位，默认值为0。一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位的元素重叠而未设置z-index属性，则位于HTML代码中最后的元素将显示在顶部。元素的定位