内容简介：美好的周末从码字开始......说道相对定位，相信很多童鞋会立马想到绝对定位。虽是同个妈生的，爹地却不同，那么性情绝对是不相同滴。相对定位，它是一种定位机制，可以使得block-level box和inline-level box相对它们本身的位置上下左右移动一段距离。
美好的周末从码字开始......
说道相对定位，相信很多童鞋会立马想到绝对定位。虽是同个妈生的，爹地却不同，那么性情绝对是不相同滴。
是什么
相对定位，它是一种定位机制，可以使得block-level box和inline-level box相对它们本身的位置上下左右移动一段距离。
这个“本身的位置”可以是box进行block formatting /inline formatting之后的位置，也可以是进行float定位之后的位置。
这表明：相对定位既可以对普通流里的元素进行定位，也可以对float元素进行定位。
怎么用
CSS中有五个属性可以用来相对定位。其中position必须设为relative,另外四个属性用法如下：
属性名: left
含义：在水平方向上，box往右边移动的距离
值:
初始值: auto
应用对象: 定位元素
继承性: 无
百分比值 :参考对象为containing block的 宽度
属性名: right
含义：在水平方向上，box往左边移动的距离
值:
初始值: auto
应用对象: 定位元素
继承性: 无
百分比值 :参考对象为containing block的 宽度
属性名: top
含义：在垂直方向上，box往下方移动的距离
值:
初始值: auto
应用对象: 定位元素
继承性: 无
百分比值 :参考对象为containing block的 高度
属性名: bottom
含义：在垂直方向上，box往上方移动的距离
值:
初始值: auto
应用对象: 定位元素
继承性: 无
百分比值 :参考对象为containing block的 高度
我们通过指定left, right, top, bottom的值来就可以控制box的位置。其实实际应用时，我们只需要设置left或right, top或bottom就可以了。但是如果left和right都设置值了，或是top和bottom都设置值了，css怎么去确定元素的位置呢？
。。。哎，好头疼，干嘛两个都设置呀，这让css解析器怎么确定box的位置呀。。
其实，他们有的是规则对付！
规则一： 这四个属性的used value始终保证 left = - right, top = -bottom
规则二：left, right 值均为auto， 则它们的used value均为0；同理top和bottom
规则三：left， right中只有一个为auto, 则它的used value为另外一个的相反数；同理top和bottom
规则四：left和right均不为auto的情况下，父元素的direction为ltr，则 left的used value为开发人员设定的值，right = -left ； 父元素的direction为rtl，则 right值为开发人员设定的值，left = -right
规则五：top和bottom均不为auto的情况下，top值为开发人员设定的值，bottom= - top
这些规则足以应对任何情况。看吧，既然css放开这些属性给你设置，肯定做好了任何情况的准备工作。
接下来上个栗子(测试工具：chrome 49.0)
<html>
<head>
<style type="text/css">
.comparation{
width:210px;
height:130px;
margin:auto;
border:solid 2px #5CBDD2;
}
.child{
width:200px;
height:100px;
border:solid 2px #E2D72F;
}
.relative{
position:relative;
left:10px;
right:20px;
top:30px;
bottom:40px;
}
.ltr{
direction:ltr;
}
.rtl{
direction:rtl;
}
</style>
</head>
<body>
<div class='comparation'>
<div class='child'>
child element
</div>
</div>
</body>
</html>
复制代码
父元素的direction为ltr的情况
为父元素加上css类ltr，代码修改成酱紫：
<body> <div class='comparation ltr'> <div class='child'> child element </div> </div> </body> 复制代码
在子元素还没有进行相对定位时，它们的关系是酱紫的：
因为父元素的direction为ltr，故子元素都是从父元素的左边开始排列。图中子元素的左边框与父元素的左边框重叠，该位置为子元素在普通流中的正常位置。
现在让子元素进行相对定位，为子元素加上css类relative：
<body> <div class='comparation ltr'> <div class='child relative'> child element </div> </div> </body> 复制代码
测试结果如下：
我们明显看到，父元素与子元素的右边框，下边框重叠，而父元素的宽度是比子元素的宽度多出10px，高度多出30px，恰好说明了子元素向右移动了10px，向下移动了30px，子元素的right值及bottom值均被忽略了。
父元素的direction为rtl的情况
为父元素加上css类rtl，代码修改成酱紫：
<body> <div class='comparation rtl'> <div class='child'> child element </div> </div> </body> 复制代码
在子元素还没有进行相对定位时，它们的关系是酱紫的：
子元素从父元素的右边开始排列，图中为子元素在普通流中的正常位置。
现在让子元素进行相对定位，代码如下：
<body> <div class='comparation rtl'> <div class='child relative'> child element </div> </div> </body> 复制代码
结果是酱紫的：
我们发现，子元素的左边框超过了父元素的左边框，但它们的下边框依然重叠，这说明了子元素从正常位置上向左移动了20px，向下移动了30px，left值和bottom值均被忽略了。
可以看到，这一切都在我们的预料之中，前提是你通晓css规则！
特殊注意事项
如果没有控制好间距，相对定位有可能引起元素之间的重叠。
元素A，元素B均为block box，宽度均为100px。它们并列在父元素的怀抱里，A在B的前面，间距为0。突然A使坏了，它启动了相对定位功能，设置left为50px。你猜猜发生了什么？
B的一半和A的一半重叠了！！
这是为什么呢？
普通流中的元素和float元素会先不考虑相对定位，在某一阶段中确定好位置，接着，相对定位元素会基于它本身的位置开始定位，定位之后其他元素不会被重新定位，然后。。。。。。。结果你们都知道的！
这中间涉及到元素的渲染流程，之后会出专门的文章，敬请期待吧！
ps: 本文例子均是在chrome 上测试。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 认识绝对定位，相对定位
- 移动端页面头部固定定位的绝对定位实现
- webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案——第五课
- IP 地址怎么定位？
- # CSS 绝对定位释义
- 如何定位渲染耗时瓶颈
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Design and Analysis of Distributed Algorithms (Wiley Series on P
Nicola Santoro / Wiley-Interscience / 2006-10-27 / USD 140.95
This text is based on a simple and fully reactive computational model that allows for intuitive comprehension and logical designs. The principles and techniques presented can be applied to any distrib......一起来看看 《Design and Analysis of Distributed Algorithms (Wiley Series on P》 这本书的介绍吧!
