css笔记 - 张鑫旭css课程笔记之 relative 篇

relative地址

relative 对 absolute的限制作用

限制left/top/right/bottom(方位值)定位

限制描述：absolute设置了方位值时，这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative，方位值就会相对于这个父元素，所以说relative限制absolute的方位值目标对象。

限制z-index层级

限制描述： 父元素没有relative的时候，绝对定位元素的z-index值越大，则层级越高。 但是如果两个绝对定位元素的父元素都有relative控制，则绝对定位元素自身的层级再高也没用，还是受其父元素的限制。只有带着relative的父元素的层级越高，绝对定位元素的层级才越高。

之所以relative能够限制absolute，是因为z-index为具体数值。当z-index为数值的时候，就会创建层叠上下文。

也就说，只要z-index为数值，就会创建层叠上下文。

在ie7+以上的浏览器中，如果z-index值为auto，那么relative就限制不了absolute的层级，这种情况下，带有absolute的元素具体层级还是看其自身不看父元素。
z-index：auto;相当于z-index:0;的效果。

ie6、7中就算z-index为auto，也会创建层叠上下文。即，在ie6、7中，只要有z-index就会创建层叠上下文。（这是一个bug）

限制absolute超越overflow的现象

限制描述： absolute又一个特性，就是设置absolute的元素，如果不设置方位值，父元素也不设置relative，那么父元素的overflow：hidden；对这个absolute元素就没有作用。 当然，如果父元素设置了relative和overflow，那么即使子元素设置了absolue，他也会超出父元素被隐藏。

relative对fixed的影响

只能限制fixed的层级，其他对于absolute限制的两条，即方位值和overflow的限制不存在。

relative和自身定位

1.相对自身特性： relative定位的目标是自身，相对于自身。

postion: relative;
left: 0;
top: 0;

则不会发生位移。 2.无侵入特性： 不会脱离文档流，不会影响其他元素布局。自己移来移去，其他元素不会位移。

relative与方位值

relative里边设置相反方向的方位值会有什么现象？

1. absolute绝对定位元素设置left+right，现象是拉伸
2. relative相对定位元素设置left+right，现象是斗争 斗争现象： 两个之间，只有一个起作用。

• 如果设置了left和right，则只有left起作用
• 如果设置了top和bottom，则只有top起作用

relative和层级

relative可以提高元素的层级（层叠上下文）

普通的两个元素，如果发生重叠，是后边的元素覆盖前边的元素

前边的元素设置relative+z-index，则可以反过来覆盖后边的元素

新建层叠上下文

当z-index的值为数值的时候，就会新建层叠上下文。包括ie6、7

当z-index为auto的时候，

ie8及以上现代浏览器不会新建层叠上下文。

ie6、7会新建层叠上下文。

relative的最小化影响原则

即，尽量降低relative属性对其他元素或布局的潜在影响

1.尽量避免使用relative：很多时候只设置一个position：absolute即可，因为absolute不设置方位值的时候，只是在原有位置腾空而起，不会发生位移，根本没必要设置父元素的相对定位。

2.relative最小化原则：比如如果absolute元素需要一个relative的父元素，可以单独建立一个div，就是设置position：relative用。