【CSS】z-index ではみ出しを防ぐ (重ねる)

2246 ワード
HTML5 JavaScript jQuery CSS3 JavaScript テキストリンク

制作中アプリにて、
写真をアップし、その場でプレビューする機能を実装中に、
z-indexを久しぶりに使ったので、
備忘録も兼ねて、ざくっとご紹介します。

解決したい事

下記のように、写真が来ると文字が枠外にはみ出てしまいます。

< 完成形 >

写真はテキストの上に乗ってもらいます。

z-index プロパティ

ボックスの重なる順番(優先順位)を決めれるプロパティ。
値は整数で、大きいものが手前に表示される。

cssを記述する。

まず、テキストは写真の下に入って欲しいので、
z-indexの値は 0 にします。

sample.scss
.text {      // ⬅️テキストが入っているクラス
  z-index: 0;   
  font-size: 16px;
}

次に、写真はテキスト上に重ねるので
z-indexの値を 1 にします。

sample.scss
.img {      // ⬅️写真
  z-index: 1;   
  height: 145px;

}

終了です。

※ 写真下部にある「削除」の要素は今回の記事とは関係ありません。
ご覧いただきありがとうございました。