知识目标
- 掌握定位的概念和常见的定位方式
- 掌握设置定位属性的方法
1. 定位的应用场景

2. 静态定位
当position属性的取值为static 时,可以将标签定位于静态位置。所谓静态位置就是各个标签在HTML文档流中默认的位置。
任何标签在默认状态下都会以静态定位来确定自己的位置,所以当没有定义position属性时,并不是说明该标签没有自己的位置,它会遵循默认值显示为静态位置 。
在静态定位状态下,我们无法通过边偏移属性(top、bottom、left或right)来改变标签的位置。
3. 相对定位
position: relative
:相对定位是元素在移动位置的时候,相对于自身原来的位置来说的;
特点:
- 相对于自己原来的位置来移动
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。
用的较多时一般是作为绝对定位孩子的父亲时会使用。
4. 绝对定位(常用)
position: absolute
:是元素在移动位置的时候,相对于它祖先元素来说的; 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。
子绝父相:常用,一般时想将位置固定在父亲的某个位置上,此时父亲一般使用相对定位,子元素使用绝对定位。然后使用top left bottom right来控制与周边的距离。
5. 固定定位(常用)
position: fixed
: 元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。如置顶按钮,旁边的广告栏。
特点:
- 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。
- 固定定位不在占有原先的位置。
- 固定定位也是脱标的,可以看做是一种特殊的绝对定位。
6. 定位模式总结

6. 定位叠放次数
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)。
- 数据可以是正整数,负整数或0,默认是auto, 数值越大,盒子越靠上。
- 如果值一样,则以书写顺序为准,后面的在上。
- 数字后面不能加单位。
- 只有定位的盒子才有z-index属性。
7. 案例演示
