将某一个元素设置为相对定位后，通过设置left、right、top、bottom，它可以参照自己的原始位置进行移动。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>相对定位示例</Title><style type="text/CSS">h2.pos_left{position:relative;left:-20px/*左边距减20px，相对于原来的位置左移20px*/}h2.pos_right{position:relative;left:20px/*左边距加20px,相对于原来的位置右移20px*/}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2></body></HTML>层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 以这个div为参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图：
让Box2以橘色div为参照物
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图：
因为橘色div是最初的包含块，所以在都不设置定位的情况下，默认以橘色div为参照物。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图：
此外，还要注意仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div Box1
<div Box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
效果图：
ie6的情况下，Box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div Box1
<div Box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
效果图：
元素框的表现类似于absolute，不过其包含块是视窗本身。
参考：http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html
总结以上是内存溢出为你收集整理的CSS布局之定位详解（position）全部内容，希望文章能够帮你解决CSS布局之定位详解（position）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）