同位素JS绝对定位

IsotopeJS absolute positioning

本文关键字：定位 JS 同位素      更新时间：2023-09-29

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

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

值得注意的是：只需在最后删除激活同位素的脚本，就会恢复到我预期的结果（其中图像涵盖了接下来的内容）。

问题：有没有一种方法可以让绝对定位的图像覆盖后续有序的细胞？

在查看同位素配置中可用的选项时，我发现将transformsEnabled:false设置为选项可以解决这个"问题"。其功能的官方描述：

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

相关文章：