絶対配置を使わないCSSのテスト

1. このページの目的

モダンCSSによる絶対配置（position: absolute;）の削減 | コリス を試す。

position: absolute の代わりに display: grid などが使えるよという内容。

2. ケース1: カードのオーバーレイ

2-1. position: absolute を使う場合

2-2. display: grid を使う場合 (モダンなやり方）

3. ケース2: カードのタグ

4. ケース3: ヒーローセクション

4-1. position: absolute を使う場合

4-2. display: grid を使う場合 (モダンなやり方）

5. ケース4: display: contents

6. ケース5: カードアイテムの並べ替え

7. ケース6: 中央寄せ

8. ケース7: 画像のアスペクト比

9. ケース8: position: absolute; を使用する方がよい場合

参考