5

我正在学习使用 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');
    })
});

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

4

1 回答 1

2

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

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

于 2013-02-09T13:17:43.980 回答