こんにちは。2年目フロントエンドエンジニアのM.Hです。
皆さん、cssで要素を重ねるとき、どのようなプロパティを設定しますか？
すぐに思いつくのはposition:absoluteではないかと思います。あとはtransformやマイナスのマージンを付けたりする方法もありますね。
gridを使うことでも重ねられるのですが、重ねる方法をwebで検索してもあまりすぐには出てきません。ということで本記事ではgridを使って要素を重ねる方法を紹介します。
想定ケース
今回は簡単に、以下のような開かれた画像に対して閉じる×ボタンが重ねて表示されるようなケースを想定します。
htmlは以下のようになっています。簡単な構造ですね😸
img要素のsrc属性が空ですが、ちゃんと画像のurlを設定します。
<div> <img src='' /> <button>×</button> </div>
では早速それぞれの方法を見てみましょう。
positionを使った重ね方
この方法で重ねると、cssは以下のようになります。
div { width: 320px; height: 400px; border: 1px solid #000; position: relative; } img { width: 100%; height: 100%; } button { all: unset; position: absolute; top: 4px; right: 4px; z-index: 1; width: 16px; height: 16px; }
divのposition: relativeとbuttonのposition:absoluteを利用しています。
「css 重ねる」などで検索すると大体こちらが出てきますね。
gridを使った重ね方
この方法で重ねると、cssは以下のようになります。
div { width: 320px; height: 400px; border: 1px solid #000; display: grid; } img { grid-area: 1/1/1/1; width: 100%; height: 100%; } button { all: unset; margin: 4px; grid-area: 1/1/1/1; justify-self: end; z-index: 1; width: 16px; height: 16px; }
div要素をgridコンテナにして、img要素とbutton要素をそれぞれ同じ場所に入るよう指定しています。
このようにすることで要素は勝手に重なります。
そのうえで、justify-selfを使ってbutton要素の位置を調整しています。
domの記述順通りに表示されるので、img要素の方がbutton要素より後に記述される場合はz-indexの指定が必要です。これはpositionを使う場合と同じですね。
grid使っても大体同じ・・・という感じがしますね。
いや、そんなことはないです。
gridを用いる利点
gridを使うことでどのようなことが嬉しいのでしょうか。
- align-selfなどのプロパティで位置を指定できる
上の例でも使用しているように、align-selfやjustfy-selfを利用することが出来ます。 例えば重ねる要素を中央に置きたい場合などはこちらの方が簡単に記述できます。
positionだとleft:50%を指定して更にtransform: translateX(-50%)というハック的な記述になり、可読性の面でもイマイチに感じます。
- 探しやすい
relativeがどこについているのかわからなくなることもありますよね。gridの方が探しやすいです。
- そもそものレイアウトにgridを使用している場合、一貫性が出る
gridのまとまりの中で1要素として扱うことが出来ます。
逆に、今回の想定ケースのように単純に右上に置きたいだけなら特に優位性はないです。好みで選択すれば良いかと思います。
まとめ
今回はgridを使って要素を重ねる方法を紹介しました。
いつでもpositionよりもgridが優位なわけではないですが、使い分ける手段の一つとして知っておくと役に立つときが来ると思いますので、ぜひ覚えておいてください！
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp
