HTML标签子元素绝对定位被父元素遮挡问题

 

示例代码：

<li class="box">
    <img src="...." class="hot" />
    <a href="..."></a>
</li>


<style>
    .box { position:relative; }
    .hot { position:absolute; top:-9px; right:-9px; }
</style>

 

备注：

1. 现在父级是类为 box 的 li 标签，子元素是类为 hot 的图片

2. 正常情况下，图片是定位在盒子内部的，但是如果有特殊情况，比如有个小闪动图标什么的，就要定位到盒子外部

3. 如果像上面代码那样，图片可能要被盒子覆盖了，那么，这种情况我们要怎么解决呢

 

解决方法：

1. 只需要在盒子里添加 overflow:visible; 就可以了

<style>
    .box { position:relative; overflow:visible; }
    .hot { position:absolute; top:-9px; right:-9px; }
</style>

2. 如果有其他情况的话，还要具体问题具体分析！