制作中アプリにて、
写真をアップし、その場でプレビューする機能を実装中に、
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;
}
終了です。
※ 写真下部にある「削除」の要素は今回の記事とは関係ありません。
ご覧いただきありがとうございました。