在其他元素之上不断变换元素

Question

我正在学习使用 CSS3 3D 变换，但我无法将正在变换的元素置于所有其他元素之上。

这是我目前所拥有的：http://bos.rggwebdesigns.com/

如您所见，该站点遵循标准的 z-index 规则来处理三个 .row div 的层次结构，这意味着第一行中的卡片位于第二行中的卡片之后，依此类推。

我尝试向转换脚本（在 main.js 中）添加行，该脚本选择单击的 .card 元素上方的 .row 元素并将其 z-index 设置为 1000，但这似乎不起作用。

$(document).ready(function() {
    $('.card').click(function() {
        $('.row').removeClass('top');
        $('.card').not(this).removeClass('flipped');
        $(this).parents().eq(2).toggleClass('top');
        $(this).toggleClass('flipped');
    })
});

重申一下，我试图确保转换元素的所有部分始终出现在其他元素之上。

Answer 1

根据我所见，z-index 需要是相对的。因此，如果您为“行”类设置position : relative;，应该可以解决您的问题。

编辑： 我正在查看您的代码。你还需要把css中的.row.top改成.top