IsotopeJS absolute positioning

Question

I've made a simple layout with Isotope that causes an unexpected result. When an absolutely positioned image is used and would extend over another entry, it gets placed behind it. The sample code:

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:

<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'
    });
});

Notable: simply removing the script at the end that activates Isotope reverts to the result that I would expect (where the image covers content that follows).

Question: Is there a way to get the absolutely positioned image to cover subsequent ordered cells?

Answer 1

While looking over the options that are available in the Isotope configuration, I found that setting transformsEnabled:false as an option fixes this 'problem'. The official description of its functionality:

Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting transformsEnabled to false will disable this feature so all browsers use top/left absolute positioning. Useful for resolving issues with CSS transforms.