【CSS】二つ並んだ要素の一部を重ねて表示するテクニック

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSで二つ並んだ要素の一部を重ねて表示する方法をご紹介しています。

具体的には下記のデモのような表示となります。左に表示されている画像に重なる形で、右のテキストを内包するボックスが重なって表示されているかと思います。

DEMO

See the Pen
WNbLVoM by ryohei (@intotheprogram)
on CodePen.

いかがでしょうか。

デモでは画像とテキストを重ねて表示していますが、画像と画像、テキストと図など様々なコンテンツに応用できます。汎用的に使えるデザインですので覚えておいて損はないかと思います。

では、解説していきます。

二つ並んだ要素の一部を重ねる

まずはHTMLから作成していきます。ボックスの中に重ねて表示するための二つの要素を設置するイメージで記述します。

HTML

<div class="box">
    <div class="box-left">
        <img src="https://picsum.photos/400/400" alt="">
    </div>
    
    <div class="box-right">
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

以上でHTMLは準備完了です。

続いてCSSでスタイルを定義していきます。重ねる要素の親となる「box」に対して「position: relative」を定義し、上に重ねる要素に「position: absolute」を定義します。そうすることで要素同士を重ねることができます。

SCSS

.box {
    position: relative;
    width: 600px;
    height: auto;
    margin: 0 auto;
    
    .box-left {
        width: 400px;
        height: 400px;
    }
    
    .box-right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 300px;
        height: auto;
        line-height: 1.5;
        padding: 20px;
    }
}