内容简介：美好的周末从码字开始......说道相对定位，相信很多童鞋会立马想到绝对定位。虽是同个妈生的，爹地却不同，那么性情绝对是不相同滴。相对定位，它是一种定位机制，可以使得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 绝对定位释义
- 如何定位渲染耗时瓶颈
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
区块链革命
[加]唐塔普斯科特（Don Tapscott）、[加]亚力克斯·塔普斯科特(Alex Tapscott) / 中信出版集团股份有限公司 / 2016-9 / 69
（1）国际大腕“数字经济之父”继畅销书《维基经济学》之后再出力作！ （2）一本真正全景式描述区块链理论及应用的巨著！ （3）苹果共同创始人史蒂夫·沃兹尼亚克、世界经济论坛创始人和论坛主席克劳斯·施瓦布、网景及硅谷安德森·霍洛维茨风险投资公司创始人马克·安德森、麦肯锡董事长兼全球总裁鲍达民、 百事公司首席执行官卢英德、丹·舒尔曼 Paypal公司首席执行官等全球政治界、学术界和商界精英联......一起来看看 《区块链革命》 这本书的介绍吧!
