绝对定位和相对定位的研究

绝对定位和相对定位的研究

现象：
研究jsp页面元素的绝对定位、相对定位、静态定位

定位属性：
首先看下 position 属性的设置
static ：无特殊定位
relative：相对定位
absolute：绝对定位

一：静态定位(static) 、
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

二：相对定位(relative) 、
先说相对定位：所谓相对定位，就要有一个参照物，但这个参照就是它自己，原来的位置保留着，偏移后会把其它的层遮罩住。top left 等都是相对于之前的位置进行偏移。所以设置相对定位的时候，及时元素进行了对应的偏移，但是它之前占据的空间依旧会保留。

三：绝对定位(absoulte) 、
再说绝对定位，也都有一个参照位置，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就只能根据祖先类元素进行定位，而这个祖先类还必须是以postion非static方式定位的，如看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，

四：固定定位位置 (fixed) 、
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

方法：
一：静态布局和默认布局
1：首先看看默认布局

2：设置静态布局可以看到 div的布局和没有设置效果是一样的。因为默认布局就是静态布局

3：设置了静态布局 即使使用top left 这些偏移也是无法启动效果

二：设置相对定位
1：将div2 top设置为0px 所以div2相对之前的位置 在y轴上没有偏移
设置 left 为110px 所以div2相对之前的位置向右偏移了110px

2：如果将div2设置相对定位 向上偏移100px top设置为-100px，向右偏移110px left设置为110px。div2将偏移到 div1的后面。但是div3的位置便没有受到影响，因为相对定位 元素虽然进行了偏移 但是依旧会保留之前占用的位置空间。

3：相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据元素偏移之前的位置进行的定位。

4：相对定位的时候 top/left/right/bottom不会对元素之前的位置进行偏移
那margin / padding会不会改变元素之前的位置呢


根据上图看出margin和padding都影响了元素之前的占位空间

三：设置绝对定位
1：设置元素绝对定位， 元素之前占位空间将会不会被占据 元素div1设置偏移之后 div2将会向上面布局，同时这种情况就会存在覆盖的问题。可以通过z-index来设置元素的层次

2：将div背景设置颜色 可以看到 div1覆盖了div2

3：两个元素都设置绝对定位 如果产生覆盖，可以设置z-index来设置元素的层次，层次越大将会在上面显示

4：绝对定位元素的祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，

5：那么祖先类中的margin/padding会不会对绝对定位position产生影响呢？看个例子
-未设置marrgin和padding

-14设置margin外边距

-15设置padding

根据上面可以看出设置了祖先类中的padding 对绝对定位的元素没有影响，只对没有设置绝对定位的元素如div2 有影响而设置了margin对绝对定位元素有影响

四：如果设置向右和向左偏移同时存在，效果会怎么样？如图
如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。

五：固定定位将由浏览器窗口作为定位标准，即使祖先类元素设置了postion定位也无效