第三十八章 定位（三）

前边的都记住啦？那就来看今天的。

其实我觉得，日常用 relative 定位的地方并不多，但是又绝对不少。这话怎么理解呢？就要先看今天的定位方式：absolute 了。

这个简单，就把上节课的例子的定位改成 absolute 就好了，我就不再复制一遍了，来看看效果。

现在看到，红色的格子没了他原来的位置。这就是老师说：“小明，你给我搬着桌子椅子滚出去！”然后就连他的位置都不给留了，就当没他这回事。

然后再说定位，老师都不要小明了，所以他也不可能相对于他原来的位置进行定位了，班里都不承认他了，哪里还有位置啊。

那么他的 left 之类的属性相对于谁呢？相对于套在他外面的，从他开始往外数，第一个定位方式不是 static 的元素。这个听起来乱，其实也很简单，就是不是默认定位方式的元素。

就是小明这孩子虽然淘气，但是有良心啊。默认的不敢跟别人说自己是被某某学校或者说自己被某某班开除的，他怕给学校啊、班级啊……丢脸。只有当这些集体声明过不在乎（声明其他的定位方式），他才敢说自己是从那里出来的。而且，为了牵连更少的人跟自己丢脸，如果班级和学校都做了声明，他只说班级，不说学校。

如果他外面的元素都没有声明其他的定位方式怎么办？那他相对于页面的最边缘进行定位，注意是页面，不是 html 或者 body 元素，是更外面的页面边缘。

但是这样想找小明在哪里真的好难！所以一般的我们会给父级元素进行 relative 定位，但是不进行偏移，就是不设置 left 什么的值，这样父级元素还在他原来的地方，还站着原来的位置，仿佛什么都没变化过。这就明白了为什么前边我说 relative 用的不多却也不少，因为单独用它本身特性的地方可能比较少，但是出现 absolute 定位的时候，他一般都会在外层辅助性的出现。

就是小明被轰出去了，老师很开心，说我们全班大合唱庆祝一下吧，但是不用动地方了，都在座位上唱就好了。反正我说的挺玩笑的，你理解就好，后面我们会有案例来专门说明这些问题的。现在就是把故事听明白，知道我比喻的是些什么。

本章代码下载：本章代码