目录
学习目标
-
能够说出为什么需要定位
-
能够说出常用3种定位各自的特点
-
能够利用定位属性实现轮播图案例
传统布局：盒模型： 内边距 外边距 边框 width,height 浮动：并排
定位的作用
普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）
定位 功能 : 压盖，特殊位置
定位的实现
使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置
定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位
边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。通常水平位置通过left或right控制，垂直位置通过ttop或bottom控制
-
位置属性
left：设置距离包含块左侧的距离 right：设置距离包含块右侧的距离 top：设置距离包含块顶部的距离 bottom：设置距离包含块底部的距离
-
取值
-
长度值：px/em等
-
百分比：相对于包含块计算
-
auto 默认值
-
定位值;(盒子坐标是什么！)left,right,bottom,top
(left,top) (left ,bottom) (right,top) (right,bottom)
离参考对象哪条边界近就选哪个值！！可以使用负值
position:relative相对定位
相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。
基础特性
-
不脱离文档流
-
提升元素层级
-
不定义偏移量时对元素基本没有影响
应用场景
通常作为定位父级配合绝对定位使用
1. 微调盒子位置(相当于外边距！)
2. 辅助绝对定位找参考对象！
position:absolute绝对定位
没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位
基础特性
-
脱离文档流
-
提升元素层级
应用场景：
通常配合绝对定位使用（父相子绝）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等
是否发生位置变化:发生
参考对象：初始参考对象是body 子绝父相
是否适合布局：非常适合
是否脱离标准流: 脱离标准 层次 压盖
作用：
最低0.47元/天 解锁文章
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
