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>

这是我的小提琴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;
}

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

1 个答案: