IsotopeJS 절대 위치 지정

예기치 않은 결과를 초래하는 Isotope로 간단한 레이아웃을 만들었습니다. 절대적으로 배치 된 이미지를 사용하고 다른 항목 위로 확장하면 뒤에 배치됩니다. 샘플 코드 :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을 옵션으로 설정하면이 '문제'가 해결된다는 것을 알았습니다. 기능에 대한 공식적인 설명 :

Isotope는 CSS3 변환을 사용하여 브라우저에서 사용할 수있는 항목 요소를 배치합니다. transformsEnabled를 false로 설정하면 모든 브라우저에서 상단/왼쪽 절대 위치 지정을 사용하도록이 기능이 비활성화됩니다. CSS 변환 관련 문제를 해결할 때 유용합니다.

출처

2013-11-25 05:27:46 Tom

IsotopeJS 절대 위치 지정

답변

관련 문제