相对于后面会讲到的绝对定位,相对定位确实要简单的多。但是简单不代表不重要,今天就来说说它。
一、什么是相对定位
一旦一个框按照常规流或者是浮动得到定位,它可以相对该位置进行偏移。这就叫做相对定位。这就是标准中对于相对定位的解释。
二、相对定位元素的一些特性
relative和absolute有一点很像,都能根据top、right、bottom和left属性进行偏移,但是这个偏移有所不同。absolute元素的偏移是相对于它的包含块来的,absolute的包含块在包含块那一章已经说过了,这里就不再说了。而relative元素的偏移,是相对于它自身在常规流中的位置来偏移的。
这里要注意的一点,relative元素的偏移是相对于它自身在常规流中的位置来偏移的,但是它在常规流中还是占据原来的位置,保留它在常规流中的尺寸。所以它的偏移是不会影响到后续的框的。比如一个relative的B1框,后续有一个也在常规流中B2框,B1偏移后,B2并不会重新定位,B1的偏移对B2不产生任何影响。
如果相对定位引起overflow:auto 或 overflow:scroll 框的溢出,浏览器必须允许用户能访问内容,也就是这个时候需要创建需要的滚动条,这可能会影响布局。
三、偏移的值
对于一个相对定位的元素,’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’left’会将框向右移动,’right’会将框向左移动。由于 ‘left’ 或者 ‘right’ 不会造成框被拆分或者拉伸,所以,计算后的值总是:left = -right。具体有如下的一些规则。
1.如果 left 和 right 的值都是 ‘auto’ (它们的初始值),计算后的值为 0。
<div style=" position:relative; left:auto; right:auto; width:200px; height:200px; border:2px solid #000;"></div>
2.如果 left 为 ‘auto’,计算后的值为 right 的负值。如果 right 被指定为 ‘auto’,其计算后的值为 left 值的负值。
<div style=" position:relative; left:100px; right:auto; width:200px; height:200px; border:2px solid #000;"></div>
3.如果 left 和 right 都不是 auto,那么其中一个不得不被舍弃。如果包含块的 direction 属性是 ‘ltr’,那么 left 将获胜,right 值变成 "-left"。如果包含块的 direction 属性是 ‘rtl’,那么 right 获胜,left 值将被忽略。注意是包含块。
<div style="width:100px; height:100px; overflow:auto; border:1px solid blue; direction:ltr; "> ltr <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></div> </div> <div style="width:100px; height:100px; overflow:auto; border:1px solid blue; direction:rtl; "> rtl <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></div> </div>
4.top 和 bottom 属性将相对定位元素向上或者向下移动,而不改变其大小。top 把框向下移动,而 bottom 将其向上移动。由于 top 和 bottom 没有造成框被拆分或者拉伸,计算值总是 top=-bottom,如果两个都是auto,其计算值就都是0,如果其中之一是auto,它就是另一个的负值。如果都不是auto,bottom被忽 略(bottom的计算值会是top值的负值)。和left、bottom有点像,就不一一举例了。
四、relative与层级的关系
设置了relative的属性是可以通过设置它的z-index属性来提升它的层级的。假设一个margin负值存在的情况下,后框会和前框发生重叠,如果两个框z-index值相同(或都没有),谁在后面谁就在上面显示。当然IE6下的z-index的蛋疼问题也是存在的,大家应该都比较熟悉了,也就不多讲了。
其实这一章写的很仓促了,只是占个位,本来说好好写,结果参加了个婚礼回来突然整个人就感觉不好了,可能酒桌上的鲍鱼被我抢太多了(笑)。头疼的不行,先放着,后面再来完善吧。