by

CSSで要素をdisplay:gridで重ねる。position:absoluteは使わない。

CSSで要素をdisplay:gridで重ねる。position:absoluteは使わない。

カテゴリー：CSS

記事作成日：2022-07-23

CSSで要素を重ねる場合、これまではpositionで重ねてきたがdisplay:gridが便利。

## 重ねる

```
<div class="block">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

<style>
div.block {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
}
div.block > div:nth-of-type(1) {
	grid-row: 1/2;
	grid-column: 1/2;
}
div.block > div:nth-of-type(2) {
	grid-row: 1/2;
	grid-column: 1/2;
}
div.block > div:nth-of-type(3) {
	grid-row: 1/2;
	grid-column: 1/2;
}
</style>
```

## 画像やリンクが含まれる場合

z-index, overflow, width, height など必要に応じて追加する。<br>
display:gridで位置を合わせてそれを調整する感じ。

```
<div class="block">
	<div><img src="example.svg"></div>
	<div>2</div>
	<div><a href="#example">3</a></div>
</div>

<style>
div.block {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	overflow: hidden;
}
div.block > div:nth-of-type(1) {
	z-index: 1;
	grid-row: 1/2;
	grid-column: 1/2;
	width: 100%;
	height: 100%;
}
div.block > div:nth-of-type(2) {
	z-index: 2;
	grid-row: 1/2;
	grid-column: 1/2;
	width: 100%;
	height: 100%;
}
div.block > div:nth-of-type(3) {
	z-index: 3;
	grid-row: 1/2;
	grid-column: 1/2;
	width: 100%;
	height: 100%;
}
</style>
```

CONTENTS