html - 如何在 bootstrap 表格单元格中显示重叠的图片？

Question

我无法在 Bootstrap 表中成功显示重叠的图片。

这个想法当然是将几个相似的图标很好地分布在一条线上。

代码是:

<style type="text/css">
.under
{
    position:absolute;
    left:17px;
    top:4px;
    z-index:-1;
}
.over
{
    position:absolute;
    left:16px;
    top:4px;
    z-index:-1;
}

</style>

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                <img class="under" height="41" alt="Drinks" src="//i.imgur.com/S8t8vOy.png"></img>
                <img class="over" height="43" alt="Drinks" src="//i.imgur.com/zrC8Mxy.png"></img>
            </td>
        </tr>
    </tbody>
</table>

这是我的 fiddle http://jsfiddle.net/c8zn41b3/

有什么想法吗？

Answer 1

为了能够获得您想要的效果，您不能绝对定位这两个元素。绝对位置将元素带离 dom，除非它有一个相对位置的父容器。因此，您需要的是让 img 的父级相对定位以包含绝对位置，然后相对于其中一个 img 定位，因为您不会得到缩小表。然后将另一个 img 定位为绝对位置。

DEMO

CSS

td {
    position: relative;
}
.under {
    position:relative;
    left:17px;
    top:4px;
    z-index:-1;
}
.over {
    position:absolute;
    left:22px;
    top:4px;
    z-index:-1;
}