巧妙解决使用DD_belatedPNG解决IE6PNG透明问题引发的relative定位冲突

在帮助同学完成湖南科技大学ACM判题系统的时候，由于需要解决PNG在IE6下的透明引入并使用了DD_belatedPNG.js(其他方式有弊端无法满足需求)。而在这过程中发现在  使用 DD_belatedPNG. 的元素上进行 position:relative; 会发生错位，而我又必须使用position:relative,这里是为了使用Z-INDEX实现满足需求的罩，z-index属性必须和position:relative或者position:absolute同时使用才奏效实现对应的层级遮罩关系。

要求效果：

下面的主体内容要遮罩中间奖牌的一部分，那么奖牌和下面的主体部分都需要设置z-index和position:relative,那么必然导航即使用DD_belatedPNG又使用position:relative就会引起错位，这不在IE6下飘顶了。

情形：使用DD_belatedPNG和position:relative会引起错位。

那么如何解决这个错位了？在本需求中DD_belatedPNG(处理PNG透明并允许图片定位)和position:relative(触发z-index有效)都是必须的。

在一番纠结之后，我突然发现IE6下我没设置position:relative的话z-index也是有效的。我表怀疑态度Z-INDEX在IE6下不需要position:relative等触发，然后再自己写DEMO考证，IE6下是需要触发的。那么继续找线索，最后找到导航元素（含奖牌那）是使用了DD_belatedPNG.js才导致不需要position:relative触发而使z-index有效的。

那么既然IE6下直接使用 position:static 结合 DD_belatedPNG就可以使z-index有效,而ie6下使用position:relative反而错位，那么写一个HACK，IE6下导航元素position:static，其他浏览器position:relative(触发z-index有效)。

分析问题，利用DD_belatedPNG对不同浏览器不同position的不同效果和Z-INDEX的影响结合，解决了这个问题，个人认为这是一个较为好的解决方案。

虽然用了一个HACK,关于HACK的使用。最开始学习CSS的时候利用过点，后来学习过程中知道提倡NO HACK，WEB标准什么的就走上了NO HACK 鄙视使用HACK之路，再后来思维又改变觉得在代码精简的基础上可以使用CSS HACK或者自己权衡各种需求可维护性等的情况下适当使用CSS HACK。

在这里我个人认为使用一个CSS HACK是较为好的，为什么呢？本来  DD_belatedPNG 也是写了一个HACK判断，只在IE6下使用，而我也只在IE6下_position:static 这样无可厚非。 现在的历史环境下 ，HTML5 CSS3的部分支持下 不是写各种CSS HACK，让优秀的浏览器获的更好的用户体验么？而低版本的浏览器在效果体验率差依旧满足人们日常的使用。

记得在边锋实习期间，也碰到了同样这个问题，那个时候没有好好分析研究。采用的是改变DIV的顺序，而使用margin-top实现遮罩，不得已绕道避开了DD_belatedPNG引起的定位错误，没有使用z-index，这次遇到了同一个问题终于没有放过它在研究实践中发现特征用一个个人认为更为普遍性的方法解决。

而在这个帮同学ACM系统（设计+前端）中的需求而言，学校的内部使用项目，没有多大得用户量，不需要别人进行程序维护，那么我在这里没有对其进行优化兼容即可，满足开发使用需求即可。

哎，最近老想出个什么作品，具有代表性的作品，可惜既想不出也还做不出，还是先好好打好基础。