【62-9】Grid Layout での order, position-absolute, z-index, margin

orderプロパティは、Gridアイテム の順番を変えるのに使えます。
また、position-absolute はグリッドのラインを基準に指定できたり、z-indexプロパティは position: staticでも指定できたりします。

Grid Layout の中で使うと、いつものプロパティがいつもとちょっと違います。
今回はこのあたりをメモっておきます。

本日のINDEX

1. orderで Gridアイテムの表示順を自由に変える
2. position-absolute は Gridラインが基準になる
3. z-indexは position指定に関係なく使える
4. マージンも Gridラインを基準にする

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns

（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

【62-3】セルやエリアを一括指定する grid-templateショートハンド

【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns

【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる

【62-9】Grid Layout での order, position-absolute, z-index　←今日はココ

（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

参考：
・CSS Grid Layout Module Level 2 | W3C Editor's Draft
・CSS グリッドレイアウト | MDN

orderで Gridアイテムの表示順を自由に変える

orderプロパティは、Flexible Box Layout Module に載っているプロパティですが、 Grid Layout でも使えます。
flexアイテムのときと同じで、orderプロパティは、Gridアイテムの視覚的な順序を並べ替える必要があるときにだけ使います。

Flexbox での orderプロパティの使い方は、下記をご覧ください。
【18-4】Flexboxの orderプロパティで表示順を自由に変えよう

orderプロパティの値は、整数のみ。デフォルトは0。
マイナスの値も使えます。マイナスの値は、数値が大きいほど「前」になります。

サンプルで試してみます。
2行3カラムのグリッドで、6個のアイテムを作ります。

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSSで最後のアイテム（F）に order: -1 を指定して先頭に、
3番目のアイテム（C）に order: 1 を指定して最後に表示させます。

.container{
  box-sizing:border-box;
  border:1px solid#ccc;
  display: grid;
  grid-template: repeat(2, 5em) / repeat(3, 1fr);
  }
.container div:nth-child(6) {order:-1}
.container div:nth-child(3) {order:1}

プレビューはこちら。

A

B

C

D

E

F

orderプロパティのデフォルトは0なので、何も指定していないアイテム ABDEは「order: 0」です。
マイナスにすれば表示順は「前」になるので、order: -1 を指定した Fは ABDEより前に行き、order: 1 を指定した Cは、0な ABDEより後ろに表示されるというわけです。

position-absolute は Gridラインが基準になる

Gridコンテナの子孫要素（子要素じゃなくても孫でも曾孫でも）に position: absoluteが指定されていて、Gridコンテナが positionの基準（position: static 以外が指定されている）になっていたら、なんと、グリッドのラインが位置指定の基準になるんです。

grid-row、grid-columnプロパティで位置指定もできるし、top や left などの指定もグリッドのラインが基準になります。

position: absoluteについては、下記をご覧ください。
【22-2】要素を絶対位置に指定する position: absolute

先程のHTMLに、もう一つアイテムを増やしてみました。
3行目にできた暗黙的row にいますね。まだ何もposition指定していませんよ。

A

B

C

D

E

F

position指定なし

この最後のアイテムに position: absolute を指定（6行目）
Gridコンテナを基準にするために、Gridコンテナに position: relative を指定します（12行目）
最後のアイテムは、Grid Layout の指定方法で位置指定し（13〜14行）
top、right、bottom、left は全部 10px にしました（15〜18行）

.container{
  box-sizing:border-box;
  border:1px solid#ccc;
  display: grid;
  grid-template: repeat(2, 5em) / repeat(3, 1fr);
  position: relative;
  }
.container div:nth-child(7) {
  background: rgba(156,100,210,0.5);
  color:white;
  font-weight:bold;
  position: absolute;
  grid-row: 1 / span 2;
  grid-column: 2 / 3;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;

プレビューはこちら。
Gridのラインを使って配置されてますね。

A

B

C

D

E

F

position: absolute

z-indexは position指定に関係なく使える

z-indexプロパティは、位置指定された要素（position: static 以外の position指定された要素）にのみ使えるのが標準ルールです。
それがなんと、Gridアイテム で使うと position: static だろうがなんだろうが、z-indexプロパティを自由に指定することができます。

z-indexについては、下記をご覧ください。
【23-1】要素の重なり順の上下関係を指定する z-indexプロパティ

先程のサンプルの 2番目のアイテム（B）に z-index: 1 を指定してみます。
position 指定は何もしていないので、デフォルト値の position: static のままです。

.container div:nth-child(2) {
  z-index: 1;
  }

プレビューはこちら。
アイテム B は、上に乗っかったアイテムの更に上にきてますね。
Grid Layout の中だけ、positionプロパティの値に関係なく z-indexプロパティが使えるということです。

A

B

C

D

E

F

position: absolute

マージンも Gridラインを基準にする

Gridアイテムは、普通に marginプロパティを使うことができます。
その場合、親要素や 隣接する他のアイテムからのマージンではなく、Gridのラインからのマージンになります。

ネガティブ・マージン（値がマイナスの数値のマージン）を使えば、positionプロパティを使うより簡単にアイテムを重ねることもできます。

marginプロパティについては、下記をご覧ください。
【11-1】marginと marginのショートハンド
【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）

先程のサンプルの 最初のアイテム（A）に margin: 10px -3em -20px 10px と指定してみます。（これは、上マージン10px、右-3em、下-20px、左10px という指定です）
ついでに z-index: 2 と指定して、一番上にしてみます。

.container div:nth-child(1) {
  margin: 10px -3em -20px 10px;
  z-index: 2;
  opacity: .7;
  }

プレビューはこちら。
右と下に はみ出してますね。z-indexも効いて、一番上になっています。

A

B

C

D

E

F

position: absolute

次回予告

今回は、
orderプロパティが Grid Layout でも Flexboxと同じように使えるということと、
Grid Layout の世界では、position-absolute, marginプロパティは Gridラインを基準にレイアウトできるってこと。
そして Grid Layout の世界では、なぜか z-indexプロパティが自由に指定できるというメモでした。

次回でGrid Layoutについては最後です。
次回は、Grid Layout の、IE10〜Edge15まででの書き方を見てみます。
標準仕様とは違うプロパティ名で指定します。