2022/3/8 （更新日: 2022/3/9）

画像の上に要素をずらして重ねるレイアウトの作り方

CSS

ずらして重ねるレイアウトの作り方がわからない

そんな悩みにお答えします。

あえてレイアウトを崩すブロークングリッドなレイアウトのデザインってとても多いです。

だからコーディングする者としては要素をずらす、重ねる方法はいくつも手駒にしておく必要があります。

今回はpositionプロパティを使った方法を紹介します。

1 画像の上に要素をずらして重ねる
2 HTML
3 CSS

画像の上に要素をずらして重ねる

今回作るのはこちらです。

重ねてずらすレイアウト

よくあるタイプのレイアウトです。

HTML

<div class="container">
  <div class="picture">
    <img src="img/husky02.jpg">
  </div>
  <p class="text">シベリアン・ハスキーは、スピッツ族に属する犬種で、エスキモー犬の一種。<br>黒、黒青色、茶褐色、白までさまざまな色があり、真っ白なシベリアン・ハスキーはホワイト・ハスキーと呼ばれています。<br>また、どの色もお腹だけは白いものが多いです。</p>
</div>

HTMLはごく普通に画像とテキストを並べただけです。

CSS

img {
  width: 100%;
  height: auto;
}

.container {
  max-width: 900px;
  width: 100%;
  margin: 100px auto;
  position: relative;
}

.picture {
  width: 50%;
  position: relative; 
}

.picture::after {
  content: " ";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 100%;
  height: 100%;
  background-color: #C0C0C0;
  z-index: -1;
}

.text {
  position: absolute; 
  top: 50%;
  transform: translateY(-50%); 
  right: 0;
  width: 60%;
  line-height: 1.8;
  font-size: 20px;
  color: #fff;
  background: #00CC99;
  padding: 30px;
}

今回ずらして重ねる箇所が２つあります。

１つは画像と背景色、もう１つは画像とテキストです。

まず画像と背景色をずらして配置しているのはpositionプロパティと疑似要素を使っています。

この方法は以前に記事にしていますのでご参照ください。

【CSS】写真と背景色を重ねてずらす表現方法　

次に画像とテキストはpositionプロパティで配置しています。

テキストを画像の縦に対して中央に配置するため「top: 50%;」「transform: translateY(-50%);」と指定します。

また「right: 0;」「width: 60%;」と指定することで画像に重なるようになります。

画像の上に要素をずらして重ねたサンプル図