#今天完成的事

准备小课堂

#明天计划的事

继续任务十四，十五

#遇到的问题

这次我选的小课堂题目是，position有哪些定位？它们各自的特点是什么？

以前总觉得自己懂了什么是position定位，也基本会用position定位，但是

事实证明，自己了解的还不够多，这次又是挖掘出了很多自己不知道的知识

点。

基本的属性之前都有过了解了

默认值

遵循正常文档流

可能的值，常用的就三个，relative，absolute和fixed，基本的用法都知道了。

想要说的是自己之前不知道的东西：

relative，absolute，fixed就好像三兄弟，relative是大哥，absolute是二弟，fixed是三弟。因为出生的时候上天赋予二弟的天赋技能比较厉害，它们的母亲怕二弟不听话，干出一些出格的事情，所以它们的母亲教给了大哥一种魔法，可以让大哥对二弟严加管教。

本来二弟的技能就是想去哪就去哪，甚至可以上天。但是经过大哥施法以后，最多也就是能到房顶的角落瑟瑟发抖，就像这样的画风。

大哥对二弟有着诸多限制，他们之间就是一种相煎关系，限制作用如下

可以看到这张图，就可以明白大哥对二弟的限制之二，限制absolute的层级，如图处于台阶三的大哥施法把处于z-index：1的二弟困住了，处于台阶二的大哥把z-index：3的小弟困住了，但是z-index：1的小弟的层级比z-index：3的小弟高

relative定位有两个特点：1.相对于自身2.无侵入

那么什么是无侵入呢？无侵入就是就算是偏离了位置，还是占据着文档流，具体应用就是网页上的自定义拖拽，如图

想要把这两个div交换位置的话，可以对他们两都使用relative，而且不会影响上面的元素。

还有一个问题就是当对立属性同时存在时，大哥和二弟的表现是不一样的

大哥relative表现为斗争，不是你死就是我亡，对立属性只能存在一个，而二弟就不一样了，二弟的表现为斗争，对立属性可以同时存在。

relative还可以层叠上下文，假如说一个盒子里有两张图片，开始是这样的

我们想要被覆盖的美女上前就可以使用relative，只要使用了relative，任何的层级都是干不过它的

刚刚说了，relative只要设定了z-index具体数值，那么就是可以把二弟给牢牢限制住的，还有一种意外的情况，那就是当z-index为auto时，这时候情况就不一样了，如下图

在上面有一张图片当中二弟是被牢牢套住的，并且层级上是z-index：1的二弟高于z-index：3的二弟，但是当z-index为auto时，情况就相反了，z-index：3的二弟层级超过了z-index：1的二弟。这种情况在IE6.7当中是不存在的，也就是说当relative的z-index为auto时以上表现是正常情况。但是在IE6.7下是不会变化的，所以在IE6.7下不变化是个bug

relative还有个最小化影响的原则

我们应当尽量不使用relative，就算逼不得已，也要使relative最小化

absolute定位可以不依赖relative，比如说在一个容器中有很多元素，想让一个元素定位到左上角，我们一般的做法就是给父元素relative然后子元素absolute：top，left：0，这里其实是有问题的，完全可以不用relative，直接只需要position：absolute就可以做到，就算有距离上的细微差异也可以用margin调整

那么假如说我们要使一个容器中的一个元素定位到右上角呢？

一般的做法也是给父元素relative然后absolute：top，right：0就像下图这样的

这样做其实很容易出问的，各种层级上的问题，各种被覆盖的问题，这时候我们就可以使用relative最小化的原则。给要定位的元素独立出一个div，如下图，这样就没有任何问题，而且布局上是一摸一样的