CSS所提供的Position定位属性在进行网页页面布局过程中非常重要,通过使用Position定位属性可以实现对页面元素进行精确定位,最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例,实现教学。
![023065b505b352a8e6039710fb5707e6.png](https://i-blog.csdnimg.cn/blog_migrate/bd7d7e3b86c08813fe76b9869113b7c4.jpeg)
CSS学习教程
Position定位属性
Position定位属性为设计人员提供5类定位模式,分别为static静态定位、relative相对定位、absolute绝对定位、fixed固定定位及sticky磁铁定位模型。其中较常使用的是相对定位、绝对定位与固定定位三种模式。
- static静态定位:该定位模式为HTML元素默认定位形式,各类元素按照文档流对象模型正常排列。使用static定位是,top,left,right,bottom属性无效。
- relative相对定位:该定位模式是指相对自身位置定位(可以理解为相对默认位置进行定位),通过使用top,left,right,bottom属性实现偏移,该定位模式不会影响正常文档流,即其他元素位置相对默认位置不变。在DIV嵌套时可以对父层使用该属性为子层绝对定位提供祖先。
- absolute绝对值定位:该定位形式将其最近定位的元素确定为祖先元素,参照祖先元素位置实现定位。如果祖先元素