IsotopeJS絕對定位

我做了一個簡單的佈局與同位素，導致意想不到的結果。當使用絕對定位的圖像並且將擴展到另一個條目時，它被放置在它後面。示例代碼：IsotopeJS絕對定位

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

亮點：簡單地移除在激活同位素恢復到我所期望的結果結束腳本（其中圖像涵蓋以下內容）。

問：有沒有辦法讓絕對定位的圖像覆蓋後續的有序單元？

來源

2013-11-25 Tom

你可以把你的代碼？或者使用http://jsfiddle.net向我們展示結果 –

http://jsfiddle.net/NB58d/雖然很難閱讀，因爲我手動包含同位素庫 – Tom

查看同位素配置中可用的選項時，我發現設置transformsEnabled:false作爲選項可修復此「問題」。其功能的官方說明：

同位素使用CSS3變換來定位項目元素（如果瀏覽器中可用）。將transformsEnabled設置爲false將禁用此功能，以便所有瀏覽器都使用頂部/左側絕對定位。用於解決CSS轉換的問題。

來源

2013-11-25 05:27:46 Tom

IsotopeJS絕對定位

回答

相關問題