ブログ運営・WEBデザイン

【CSS】要素をずらして重ねる方法

こんにちは。WEBデザイナーのシズです。

WEBデザイナーになってからまだ2ヶ月程ですが、毎日業務の中で新しいスキルを覚えているので、備忘録も兼ねて記事にまとめていこうと思います。

今回は「要素をずらして重ねる方法」について、解説します。

要素の上に他の要素を重ねたい場合は、positionを使用してレイアウトしていきます。

覚えておけばいろんなレイアウトで応用できるので、すごく便利ですよー。

スポンサーリンク

ただ要素をずらして重ねたいだけの場合

例えば2つの要素をちょっとずらして重ねてレイアウトしたい場合。

こんな風に。

まずはHTMLですが、今回はUlタグを使用します。

<ul class="contents">
<li class="left_box">画像1</li>
<li class="right_box">画像2</li>
</ul>

上記のようにコードを書いた場合、CSS適用前は以下のような表示となります。

liタグはブロック要素なので、要素が縦に並びます。

では早速CSSを書いてずらして重ねてみましょう!

今回動かしたいのは、画像2と書かれた黄色の要素です。

まずはこの要素に「position: absolute;」を指定します。

.right_box {
  position: absolute;
}

そして親要素には「position: relative;」を指定します。

.contents {
  position: relative;
}

「position: absolute;」を指定した要素は、親要素である「position: rerative」を指定した要素の左上を基点として、「top」「bottom」「left」「right」を使用して位置を指定することが出来るようになります。

今回はtopを20%、leftを20%に指定してみます。

.right_box {
  position: absolute;
  top: 20%;
  left: 20%;
}

すると、以下のようなレイアウトが出来上がります。

要素をずらして配置することが出来ました~!

ちなみに要素の重ね順を変えたい場合は、「z-index」を使用して変えることが出来ます。

.left_box {
  z-index: 1;
}

.right_box {
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: -1;
}

重ね順が左右逆になりました。

画像とテキストをずらして配置したい場合

では今度は画像とテキストの場合について、解説していきます。

例えばこのようなレイアウトにしたい場合。

HTMLは同じで、二番目のリストの中にはテキストを入れます。

position指定も先程と同じなので、ここでは省略します。

右側の背景のボックスの大きさは、「width」と「height」で調整します。

尚、レスポンシブのことも考えてwidthは%指定しておきます。

基本的にwidthを指定するときは絶対値指定(px指定)ではなく、相対値指定(%指定)にします。

背景色を「background」で指定すると、テキストの背面にボックスが現れます。

.right_box {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 20%;
  height: 250px;
  background: #f290ec;
}

このままだと背景のボックス両端いっぱいにテキストが広がってしまうので、「padding」を指定してテキストの周りに余白を空けます。

.right_box {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 20%;
  height: 250px;
  padding: 20px;
  background: #f290ec;
}

はい、完成!!

ちなみにliタグを使用すると先頭に「・」みたいなマークが表示されるので、このマークは「list-style:  none;」をliに指定して表示を消しておきます。

positionの使い方まとめ

positionを使って特定の要素を特定の場所にレイアウトしたい場合は、親要素に「position:relative;」を指定、特定の場所にレイアウトしたい要素には「position:absolute;」を指定します。

その上でレイアウトしたい位置に合わせて「top」「bottom」「left」「right」を%またはpxで指定すればOK。

要素を重ねて配置する場合、要素の重ね順は「z-index」で変更することが出来ます。

positionを使いこなせるようになるとレイアウトの幅も広がるので、是非覚えておきたいCSSですね!