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

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;

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

How to set isotope's elements position to relative

jquery

html

css

jquery-isotope