Question

我使用Isotope做了一个简单的布局，导致了意想不到的结果。当使用绝对定位的图像并将其延伸到另一个条目时，它将被放置在它后面。示例代码：

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

值得注意的是：只需在激活Isotope的末尾删除脚本，即可恢复到我期望的结果（图像覆盖后面的内容）。

问题：有没有办法让绝对定位的图像覆盖后续的有序单元格？

Answer 1

在查看同位素配置中可用的选项时，我发现将transformsEnabled:false设置为选项可修复此“问题”。官方对其功能的描述：

Isotope使用CSS3转换来定位项目元素（如果在浏览器中可用）。将transformsEnabled设置为false将禁用此功能，以便所有浏览器都使用顶部/左侧绝对定位。用于解决CSS转换问题。

Isotope JS绝对定位

1 个答案: