今天小码哥做一个专题页面的时候，碰到一个关于IE6下position：absolute；属性对同级元素的margin属性有影响的问题。虽然，作为前端人员，IE6下的Bug问题，始终让人头疼不已。但生活在Zhong国的码民们只能继续忍受。
言归正传，是什么问题呢？
即：假如在一个设有position：relative；相对定位属性的div盒子里，同时放另外两个div块级元素layer2,layer3。layer2设有position：absolute；属性，layer3设有margin:30px auto;属性。在正常的标准浏览器下，layer3设置的margin属性值是可以起到效果的。但在IE6下，你会发现layer3设置的margin属性值不起作用了。
先看代码一：
<div id="layer1" style=" border:1px solid #F88; width:500px;margin:20px;position:relative;text-align:center;">
<div id="layer2" style="position:absolute; background-color:#ccc;width:180px;height:40px;left:0;top:0;">Absolute (layer2)</div>
<div id="layer3" style="margin:30px auto; width:200px; height:80px; background-color:#36F;border:1px solid #ccc;">Normal Text Content (layer3)</div>
</div>
其运行在标准浏览器及IE7+里：效果图如下
再看IE6下效果图：
在上图，我们可以看到，layer3设定的margin值，在IE6下是不起作用的。
这是怎么造成的呢？我想应该是在IE6下position：absolute；属性作为浮动元素，脱离了其原本的文档流而造成的对其同级元素的影响。
我们该怎么解决该问题呢，我想按照一般人的思想就是，针对IE6下的layer3元素设定IE6 Hack，让其也加上一个position：absolute；属性，让你top值等于正常浏览器下layer3设定的margin值。
但这样，有时候感觉不是解决问题的根本方法，没有处理IE6下position属性的浮动问题。
因此，小码哥也是眼手结合，在网上看到一个大神，给出的是，在设有position：absolute；属性的layer2元素外层再加一个div盒子，不用设定任何样式，让其和layer3不属同级元素。这样也就解决了，layer2元素因浮动问题对layer3元素造成的影响。
看代码二：
<div id="layer1" style=" border:1px solid #F88; width:500px;margin:20px;position:relative;text-align:center;">
<div><div id="layer2" style="position:absolute; background-color:#ccc;width:180px;height:40px;left:0;top:0;">Absolute (layer2)</div></div>
<div id="layer3" style="margin:30px auto; width:200px; height:80px; background-color:#36F;border:1px solid #ccc;">Normal Text Content (layer3)</div>
</div>
看到针对layer2添加的红色div盒子了吗？就这样，省事又完美的解决了IE6下因position属性而造成的同级元素之间的相互影响的问题。
这样，在所有的浏览器下，其显示效果图如下：
除了以上问题，小码哥发现针对文字居中的text-align：center；属性，在标准浏览器及IE7+等浏览器里，其针对的对象都是内联元素才起作用。但在IE6下，该属性，对块级元素也是起作用的。呃呃呃，蛋疼啊，，，，，，
本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1649668
IE6 下关于Position：absolute;属性对同级元素的影响问题
原文地址：http://oxoxo.blog.51cto.com/9301862/1649668
