码迷,mamicode.com
首页 > 其他好文 > 详细

常规流之相对定位(Relative positioning)

时间:2015-08-10 00:01:27      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

  相对于后面会讲到的绝对定位,相对定位确实要简单的多。但是简单不代表不重要,今天就来说说它。

一、什么是相对定位

  一旦一个框按照常规流或者是浮动得到定位,它可以相对该位置进行偏移。这就叫做相对定位。这就是标准中对于相对定位的解释。

二、相对定位元素的一些特性

  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的蛋疼问题也是存在的,大家应该都比较熟悉了,也就不多讲了。

 

  其实这一章写的很仓促了,只是占个位,本来说好好写,结果参加了个婚礼回来突然整个人就感觉不好了,可能酒桌上的鲍鱼被我抢太多了(笑)。头疼的不行,先放着,后面再来完善吧。

常规流之相对定位(Relative positioning)

标签:

原文地址:http://www.cnblogs.com/rexD/p/4716500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!