如何确定同位素元素的相对位置

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;