稻米鼠 · 更新于 2018-10-18 09:00:47

第三十八章 定位(三)

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

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

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

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

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

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

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

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

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

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

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me