CSS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。
CSS学习教程
Position定位属性
Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fixed固定定位及sticky磁铁定位模型。其中较常使用的是相对定位、绝对定位与固定定位三种模式。
- static静态定位：该定位模式为HTML元素默认定位形式，各类元素按照文档流对象模型正常排列。使用static定位是，top，left，right，bottom属性无效。
- relative相对定位：该定位模式是指相对自身位置定位(可以理解为相对默认位置进行定位)，通过使用top，left，right，bottom属性实现偏移，该定位模式不会影响正常文档流，即其他元素位置相对默认位置不变。在DIV嵌套时可以对父层使用该属性为子层绝对定位提供祖先。
- absolute绝对值定位：该定位形式将其最近定位的元素确定为祖先元素，参照祖先元素位置实现定位。如果祖先元素没有任何定位的话，则以body为祖先元素进行定位。该定位模式将使得被定位元素脱离文档流。即不保留默认情况下该元素位置。
- fixed固定值定位：该定位模式相对于视口进行定位，定位元素不会随着滚动条的滚动而滚动。与absolute定位的最大区别在于absolute是相对body内容区域进行的定位，会随着滚动条滚动而滚动。
以上给出了position属性常用的定位方式，在实际进行页面设计及元素布局过程中可以使用以上属性实现元素的精确定位。
定位实例
为演示定位属性使用，本文设计制作上海世界技能大赛选手证，要求学生使用HTML进行选手证的设计及编码实现。要求：
- 选手证需要包含四个DIV层，分别用于表示背景框架层、顶部Logo层、选手照片层及选手信息层；
- 使用定位属性实现各层的精确定位；
本例设计要求如上所示，设计实现参考效果如下所示：
参赛证设计样式
参赛证设计样式描述如上图所示，基本元素来自世界技能大赛上海网站，主要logo包含上海世赛标识LOGO、选手照片与选手信息。所需素材如下：
案例所需素材
实现代码
本例实现代码如下所示：
CSS样式文件
页面body部分
本例实现代码如上所示，其中CSS样式部分用于实现div布局样式，页面body部分为页面呈现内容。本例父元素使用relative属性进行定位，所有子元素均以父元素为基础使用absolute进行精确定位。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！如需完整案例代码请关注并私信作者。
