IsotopeJS绝对定位

Question

我用同位素做了一个简单的布局，这会导致意想不到的结果。当一个绝对定位的图像被使用并扩展到另一个条目上时，它会被放置在它的后面。示例代码：

HTML：

<div id="container" style="height:200px">
    <div class="item">test1 test1 test1 test1</div>
    <div class="item">test2 test2 test2 test2</div>
    <div class="item">test3 test3 test3 test3</div>
    <div class="item">test4 test4 test4 test4
        <img src="https://www.google.com/images/srpr/logo11w.png" style="position:absolute;left:0;display:block;z-index:100" />
    </div>
    <div class="item">test6 test6 test6 test6</div>
</div>

剧本：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.isotope.min.js"></script>


$(function(){
    var $container = $('#container');
    $('#container').isotope({
        layoutMode: 'fitColumns'
    });
});

值得注意的是:只需在结束时删除激活同位素的脚本，就会恢复到我所期望的结果(在该结果中，图像涵盖了随后的内容)。

问:是否有办法使绝对定位的图像覆盖后续有序的单元格？

Answer 1

在查看同位素配置中可用的选项时，我发现将transformsEnabled:false设置为选项可以解决这个“问题”。对其功能的正式说明：

同位素在浏览器中可用时，使用CSS3转换来定位项目元素。将transformsEnabled设置为false将禁用此功能，因此所有浏览器都使用顶部/左侧绝对位置。对于解决CSS转换的问题很有用。