WebKit浏览器中的CSS定位错误

Question

我已尝试过所有内容，但我无法在Chrome或Safari中使用此叠加层...任何想法？箭头应该像在Firefox和IE中一样在拇指上方。

在Chrome中：

在Firefox中：

我的代码：

.hm_tst_dv_img {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    margin: 0 3px 20px 0;
    position: relative;
    overflow: hidden;
}

.hm_tst_dv_img_thumb {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    clear: both;
    position: relative;
    top: 0;
    z-index: 90;
}

.hm_tst_dv_img_overlay {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    margin: 0;
    position: relative;
    top: -80px;
    z-index: 100;
}

<div class="hm_tst_dv_img">
    <div class="hm_tst_dv_img_thumb">
        <img alt="" src="<?php echo base_url(); ?>
            uploads/testimonials/thumb_
            <?php echo $testimonial->image; ?>"
            width="131" height="80" />
    </div>
    <div class="hm_tst_dv_img_overlay">
        <a href="javascript:void(0);" onclick="PlayTestmoinalVideo(<?=$i;?>)">
            <img src="<?php echo base_url(); ?>images/testimonial_overlay.png" />
        </a>
    </div>
</div>

Answer 1

试试这个：

.hm_tst_dv_img_overlay {
    height: 80px;
    width: 131px;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

如果可以避免，我不会混合定位和花车。