[CSS]画像と文字を重ねてみよう〜position編vol.2
前回はCSSの中でも重要なpositionに関する記事を書きました。大体使いどころが決まっているということが頭に入っていると、混乱せずにCSSを扱えるようになってくるのではと考えています。今回は前回を踏まえて画像の上に文字を重ねる、そして意外に使う場面の多い重なり順についても書いてみます。
前回のおさらい
positionに指定できる値は
| static | デフォルト。通常の位置に配置 |
| relative | 通常の位置を基準として、相対位置への配置 |
| absolute | static以外の値が指定された親要素を基準とした絶対位置 |
| fixed | ウインドウを基準とした絶対位置 |
また、positionと一緒に使うプロパティは
| top: ○○px; | 基準点の上から○○px下に移動（%でもOK、マイナス値も可能） |
| right:○○px; | 基準点の右から○○px左に移動 |
| bottom:○○px; | 基準点の下から○○px上に移動 |
| left:○○px; | 基準点の左から○○px右に移動 |
| z-index: ◇; | 要素の重なり順。数字が大きいほど上に表示、マイナス値も可能 |
基準点は親要素あるいは画面の左上端を指します。
ちなみに、position: staticのときにはtop・bottom・left・rightは適用されません。
そしてポイントは
親要素がrelative+子要素がabsoluteのセットが鉄板
でしたね。
画像に文字を重ねてみよう
まず前回の位置指定にちょっと手を加えます。
See the Pen Text On Pic_default by necomacustom (@tamayura) on CodePen.27739
画像を挿入して、
absoluteのdivをpに変えました。HTML5ですと、画像には<figure>と<figcaption>を使って…というのもあるのですが、今回はそのままいきます。
figureタグについては以下の記事が詳しいです。
上の状態でも悪くはないのですが、もう少し手を加えます。
See the Pen Text_On_Pic1 by necomacustom (@tamayura) on CodePen.27739
背景色を透過する黒、文字を白にして中央に配置しました。
このようにして画像の上に文字を表示することができます。
重なり順の制御-z-index
上のプロパティ一覧のの頃の一つ、z-indexについてです。
要素の重なり順をz-indexの値で制御します。
まず、指定しないとどうなるかを見てみましょう。
See the Pen z-index by necomacustom (@tamayura) on CodePen.27739
このように後ろの要素が上に表示されます。上のサンプルの場合「青→緑→赤」と青が一番上に来ます。
それでは、z-indexを使って重なり順を変えてみます。
See the Pen z-index2 by necomacustom (@tamayura) on CodePen.27739
赤にz-index:3、緑にz-index:2、青にz-index:1をつけました。すると、赤が一番上に、青が一番下になりました。今回は「重ねる」に焦点を当ててみました。前回と合わせて「これだけは覚えておきましょう」というレベルのものですが、実際に使っていくうちに「z-indexを設定したのに意図しない重なり方になってしまった」ということも出てくるのではと思います。
上記のfigureタグなどもそうなのですが、基礎から少しづつ掘り下げていくと「なぜこのタグを使うのか」「なぜ意図しない重なりになってしまったのか」がわかってくるようになります。私もさらに勉強してわかりやすい説明ができるようになりたいものです。ねこま（@necomacustom）でした。