图片素材
这里的png图片并没有接受jQuery的png透明js的透明处理，可以在
IE6浏览器下看到透明部分显示为蓝蓝的背景色。
此图片将用在在页面上进行定位，实现类似于css中background-position的效果。
margin定位
其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的，而差别就在于background-position会自动让区域外的图片部分不显示，所以我们要做的很简单，就是给margin定位的父标签（或父父标签）给它定个高宽，然后overflow:hidden让高度宽度之外的区域不显示就行了。
另外有不得不说的：如果您使用jQuery png透明插件的话，切不可通过img标签对图片进行定位。原因在于您找不到img标签，例如这里的jQuery插件就是将img标签替换成了span，让img链接图片变成span的背景图片再应用css 滤镜实现背景透明的。下面css代码部分的注释有一些解释并提供了解决方法。
<![CDATA[<ul class="zxx_test_btn">
<li>
<a class="margin_pos_1" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="margin_pos_2" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="margin_pos_3" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="margin_pos_4" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
</ul>]]>
<![CDATA[.zxx_test_btn{float:left; margin-right:1em; padding-bottom:0.5em;}
.zxx_test_btn li{width:160px; height:40px; position:relative; overflow:hidden;}
.zxx_test_btn li a:hover{border:0;}
.margin_pos_1 .just_a_flag{margin:0;}/*事实上，调用png插件后，img标签处于display:none的状态，而被一个span标签所代替，而这个span标签的一些样式属性与img一致，所以这里的just_a_flag是需要的，因为标签类型换了，而class并没有改换。在IE6下，这里的效果其实等同于.margin_pos_1 span.just_a_flag或者是.margin_pos_1 span，但是考虑到兼容性，这里使用一个起标志作用的class是非…不可的*/
.margin_pos_1:hover .just_a_flag{margin:-40px 0 0;}
.margin_pos_2 .just_a_flag{margin:0 0 0 -160px;}.margin_pos_2:hover .just_a_flag{margin:-40px 0 0 -160px;}
.margin_pos_3 .just_a_flag{margin-left:-320px;}.margin_pos_3:hover .just_a_flag{margin:-40px 0 0 -320px;}
.margin_pos_4 .just_a_flag{margin-left:-480px;}.margin_pos_4:hover .just_a_flag{margin:-40px 0 0 -480px;}]]>
position定位
相对于margin定位，position的绝对定位与background-position的定位更接近些。position:absolute;left:-160px;top:-40px;与background-position:-140px -40px;本质上是一样的，都是定位。差别就在于background-position指背景定位，所以标签区域外的背景图片是看不见的，而使用absolute绝对定位要设置其上一级标签（或上上级标签）溢出部分隐藏，也就是overflow:hidden 。
另外有一点需要说明：原来的jQuery png背景透明插件是不支持absolute绝对定位的，我自己对其插件js做了适当的修改，使其支持此方法。所以使用网上其他地方的jQuery png透明插件会没有这个效果。
<![CDATA[<ul class="zxx_test_btn">
<li>
<a class="abs_pos_1" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="abs_pos_2" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="abs_pos_3" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
<li>
<a class="abs_pos_4" href="javascript:void(0);">
<img class="just_a_flag" src="//image.zhangxinxu.com/image/blog/200908/png_btn.png" />
</a>
</li>
</ul>]]>
<![CDATA[.zxx_test_btn{float:left; margin-right:1em; padding-bottom:0.5em;}
.zxx_test_btn li{width:160px; height:40px; position:relative; overflow:hidden;}
.zxx_test_btn li a:hover{border:0;}
.abs_pos_1 .just_a_flag{position:absolute; left:0; top:0;}.abs_pos_1:hover .just_a_flag{top:-40px;}
.abs_pos_2 .just_a_flag{position:absolute; left:-160px; top:0;}.abs_pos_2:hover .just_a_flag{top:-40px;}
.abs_pos_3 .just_a_flag{position:absolute; left:-320px; top:0;}.abs_pos_3:hover .just_a_flag{top:-40px;}
.abs_pos_4 .just_a_flag{position:absolute; left:-480px; top:0;}.abs_pos_4:hover .just_a_flag{top:-40px;}]]>
