5

CSS3 3D 変換の使用方法を学んでいますが、他のすべての要素の上に変形する要素を保持するのに問題があります。

これは私がこれまでに持っているものです: http://bos.rggwebdesigns.com/

ご覧のとおり、サイトは 3 つの .row div の階層に対して標準の z-index ルールに従います。つまり、最初の行のカードは 2 番目の行のカードの後ろにあるということです。

クリックした .card 要素の上の .row 要素を選択し、その z-index を 1000 に設定する変換スクリプト (main.js 内) に行を追加しようとしましたが、うまくいかないようです。

$(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;for クラスの「行」を設定すると、問題が解決するはずです。

編集: 私はあなたのコードを見直していました。.row.topまた、css を次のように変更する必要があります。.top

于 2013-02-09T13:17:43.980 に答える