浅谈块元素绝对定位的margin属性 - * { float: } - ITeye技术网站
博客分类：
对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验：
使用的HTML原始测试文件：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&test&/title&
&div class="wrapper"&
&div class="box"&
&div class="bottom"&&/div&
原始的测试css：
padding:0;
background:#000;
height:400
background:#F00;
margin-left:40
background:#0F0;
上面的图是普通的定义了top和left的，绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。
而要是这top和left不进行定义，则如下图：
background:#0F0;
则绝对定位元素对位参照上层父级元素。
background:#0F0;
margin-top:-30
上面代码的显示和上面的图是一样的。top的值是top和margin-top相加的值
下面的也是：
我们把margin-top的值改为30
则是下面的图：
说明上面的推断可能正确，总的top值是两个值的叠加。
下面我们用left方向来说明一下中间的.box的margin值对定位的作用：
background:#0F0;
margin-top:30
单单是left定位的话很容易猜到下图：
而用单单用margin-left呢？
background:#0F0;
margin-top:30
margin-left:20
可以看到它是根据未用position定位的父级元素的边界进行margin定位的。
如果margin和left一起出现呢？
为了和前面的区别开来，我采用left：10px
background:#0F0;
margin-top:30
margin-left:20
可以看到绿色的块元素左溢出红块，以为现在的left值为30px。
这个在IE6中也同样适用：
现在我们可以得到结论了，当绝对定位块和上层相对定位（或绝对定位）中间夹着一层标准流（或浮动）的块时：
1、只使用left等定位是按照上层相对定位（或绝对定位）的边界进行定位
2、只使用margin相关属性定位时按照上层标准流（或浮动）块的边界进行定位
3、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值
补充一点：
元素的上下和左右分别对应于哪层块互不干扰。
引申应用：
上述特点可以用来无hack地定位居中元素：
具体如下：
margin-left:-380
上面的代码就是应用了得出的观点的第三点执行的，而且这种上面的定位方式是完全遵循Css原则的无hack的模式
浏览: 168722 次
来自: 杭州
seajs 2.1.1不支持相互依赖了。
博主，你好！可以给个完整的Demo学习一下么，谢谢！！
感谢楼主分享，看明白了 什么符合索引起作用什么符合索引不起作用 ...
以前花大力气按照amazon的方式自己写了一套
这么好的帖子竟然没人回复后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3214|回复: 2
相对定位元素内的绝对定位元素Ie6下位置偏移。
UID244173在线时间 小时积分136帖子离线17278 天注册时间
初级会员, 积分 136, 距离下一级还需 64 积分
在制作圆角box时，经常要这样：外部元素相对定位，里边写4个空标签，分别设置四个圆角背景，然后绝对定位到相应位置。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3&fdsafd&/h3&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
针对ie6，我给四个圆角span加了“font-size:0;或overflow:hidden”，以让它正常的显示大小。
给外层division设置了&_height:1%&,使其得到haslayout。
这样就fix掉了大部分症状。
但是下边的俩个圆角还是向上偏移了1个像素。
于是我试着修复它，第一想到的就是haslayout,于是给.box下的h3元素加了高度。如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3 style=&height:30&&fdsafd&/h3&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
发现并没有解决，这样我基本上排除了haslayout。
于是想到是不是margin的问题，接着改：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3 style=&margin-bottom:0;&&fdsafd&/h3&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
尝试了两次发现，只有margin-bottom为0就ok了，问题似乎是解决了，但实时上并非如此。
接着我把h3改成了p,同样margin设为0；如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&p style=&margin:0;&&fdsafd&/p&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
那一像素偏移又出现了，看来还跟里边的元素有关。
接着我又试了：
把p改成div（margin为零）：不正常。
把p改成div（margin不为零）：不正常。
改成span（内联元素）：不正常。
改成table：不正常。
改成table（margin为0）：不正常。
改成img：正常。
改成textarea：正常。
开始想是不是默认haslayout的元素就正常，但table默认也有haslayout。
于是，我在box里边放了2个元素，&h3&和&p&。如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3&fdsafd&/h3&
&p &fdsafds&/p&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
把p的margin设为0.如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1_height:1%;}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3&fdsa&/h3&
&p style=&margin:0&&fdsaf&/p&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
又正常了，这下就有点复杂了，接着又改了半天，但还是没有找到规律。希望大家可以帮个忙。不胜感激啊。
UID353343在线时间 小时积分3781帖子离线17278 天注册时间
金牌会员, 积分 3781, 距离下一级还需 1219 积分
外部容器高度为奇数，导致绝对定位计算整除2不尽的问题。
外部容器高度为偶数就没事了。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1height:200}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3&外部容器高200px&/h3&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
body{background:margin:0;padding:0;}
.box{width:300background:position:border:1height:201}
.lt,.rt,.lb,.rb{display:width:6height:6font-size:0;position:background:margin:0;}
.lt{left:-1top:-1}
.rt{right:-1top:-1}
.lb{left:-1bottom:-1}
.rb{right:-1bottom:-1}
&div class=&box&&
&h3&外部容器高201px&/h3&
&span class=&lt&&&/span&&span class=&rt&&&/span&&span class=&lb&&&/span&&span class=&rb&&&/span&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 zehee 于
16:50 编辑 ]
UID244173在线时间 小时积分136帖子离线17278 天注册时间
初级会员, 积分 136, 距离下一级还需 64 积分
原来是这样啊，^_^，多谢zehee。
这样自适应高度就有点麻烦了。
Powered by