jquery - 如何将同位素的元素位置设置为相对

Question

我正在使用同位素动态加载传入的数据。我正在容器上初始化同位素，如下所示:

var $container = $('#content-main-list');
var imgLoad = imagesLoaded($container);

imgLoad.on('always', function() {
    $container.isotope({
        itemSelector : 'article',
        layoutMode: 'straightDown',
        position: 'relative',
        isFitWidth: false,
        resizable : false,
    });
});

这将导致构建以下 html:

<div id="content-main-list" class="isotope" style="position: relative; overflow: hidden; height: 15670px;"> 
    <div class="blog">
        <article class="format-standard isotope-item" style="margin-right: 10px; display: block; position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
        . . .
        </article>
    </div>
    <div class="blog">
        . . . 
    <div>
    <div class="blog">
        . . . 
    <div>
</div>

我希望元素(文章)具有相对位置而不是绝对位置。有没有办法轻松做到这一点？同位素似乎覆盖了我确保文章保持相对而非绝对的所有尝试。

感谢您的帮助。

Answer 1

尝试添加 !important。这是一个 CSS 关键字，用于将属性标记为高重要性，使其很难被覆盖。代替 position : relative;，写 position : relative!important;