0 
<div id="cards">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
</div>

#cards { position: relative }
.card { position: absolute; left: 0 }

トランプを作ってみました。

しかし、上記の方法を使うと「カード2」が一番手前になりました。

重複した DIV を dom の順序で並べ替えるエレガントな方法はありますか?

ps フレームワークとテンプレート エンジンとして knockout.js を使用していました。後者のカードを jQuery を使用して #cards に追加することを検討しました。つまり、テンプレート エンジンで「foreach」をあきらめるか、モデルを逆の順序で保存する必要があります。 . それは醜いでしょう。

ps2 手動で div の z-index を設定する方法は最後の選択です。

4

2 に答える 2

4

これが DOM の仕組みです。z-indexing を使用しない限り、DOM ツリーの下位の要素は上位の要素と重なります。

ハックや複雑なコードを使用する代わりに、それを有利に使用してカードの順序を逆にすると、より多くの問題が発生し、さまざまなブラウザーで意図したとおりに表示されない可能性があります.

于 2012-09-19T06:23:57.663 に答える
2

最後に定義された DOM の順序が上になります。これをオーバーライドする 1 つの方法は、css のz-indexプロパティを使用することです。

他の唯一のオプションは、好みに合わせてカードを並べ替えることです。

于 2012-09-19T06:16:02.193 に答える