Web前端开发 课件 6.3 定位布局

静态网页设计第六章核心应用——排版布局定位布局1定位布局的概念及作用定位模式及

其适用场景2定位实现与边偏移3定位布局的基本概念及其作用01定位布局的基本概念及其作用CSS三种基本定位机制是默认情况下的自然摆放普通流上一节学习的可以向左或向右浮动的摆放基于特定的参照物精确调整元素的显示位置高级布局手段，可将元素摆放到页面的任意位置使用position属性设置定位模式浮动流不够灵活、精准定位流元素摆放：更精准、更自由特殊造型：元素重合、错位层叠、溢出定位、触顶吸附、不规则、个性化作用定位模式及其适用情景02定位模式及其适用情景CSS中，定位流布局有五种模式：定位模式说明适用情景参照物static静态定位默认值1.普通流的自然定位，不需要做任何设置2.取消定位relative相对定位1.想参照自身位置进行微调，保留原来的占位空间2.想作为子元素定位时的参考对象元素自身absolute绝对定位想参照父辈元素进行定位设置父辈祖先元素dixed固定定位想参照浏览器进行定位设置浏览器sticky粘滞定位想让元素触碰或到达浏览器某一边时进行固定定位自身及浏览器定位实现与边偏移03定位实现与边偏移边偏移top:定位元素的上边和定位位置上边的距离bottom：定位元素的下边和定位位置下边的距离left：定位元素的左边和定位位置左边的距离right：定位元素的右边和定位位置右边的距离同一轴线上只能用一个，若同时使用，优先级高的有效正值代表向反方向移动

负值代表同方向移动选择器{

position:

static|relative|absolute|fixed|sticky;}语法声明定位模式定位实现与边偏移示例1（相对定位）

元素选择器{position:relative;top:10px;left:50px;}注：1.参照自身位置的偏移

2.也可以作为子元素绝对定位时的参考对象新位置10px50px定位实现与边偏移示例2（绝对定位）父元素{position:relative;}子元素{position:absolute;left150px;top:-50px;} 参照父辈元素进行定位结合相对定位：常用于“父相子绝”定位效果和“层叠”效果若父元素没有设置除static之外的定位，则向外扩散逐层查找，直到找到可以参照的元素若父辈元素均没有设置除static之外的定位，则参照浏览器进行定位150px50px定位实现与边偏移示例3（固定定位）.box{position:fixed;bottom50px;right:50px;}50px50px参照浏览器进行定位无论元素在哪里，设置了固定定位，参照物都会变成浏览器。定位实现与边偏移示例4（粘滞定位）.box{position:sticky;top50px;}距顶50像素时：固定定位50px此时：相对定位CSS3新增，相对定位和固定定位的结合体，有相对定位和固定定位的双重特点必须设置一个边偏移才有效常用于“触顶吸附”等效果后期剪辑：总结与思考定位布局的作用五种定位模式及其适用情景定位的实现和边偏移简单直接、灵活精准；缺点优点和浮动布局一样会脱离文档流，产生高度塌陷等