Technology ホームページ作成

[CSS] positionを使って、画像に文字を重ねてレイアウトする

2021-01-23

今回画像に文字を重ねるレイアウトを作ってみたので、その整理。

完成形はこちら。

画像に文字を重ねてレイアウトした時に、スクロールしても高さが固定されるもの(ヘッダー)と固定されないもの(メッセージ部分)で使い分けてるところにも注目。


position fixedとposition absoluteを使い分ける

まずは完成図のメニューアイコンとインスタアイコンの部分。

こちらはヘッダー代わりになるので、スクロールした時も上に固定されるようにする。

position fixedを使用することにより、ある高さで固定される。

See the Pen Position Fixed Demo by Shotaro Kamimura (@shotarokamimura) on CodePen.


このコードでは、青のrectangle2にposition:fixedをかけることで、要素が浮いて、グレーの四角より上にスクロールしても、高さが固定されるようになる。

rectangle1はposition absoluteなので、要素が浮き、グレーの四角の上に要素が表示されるようになるが、高さは固定されない。

なのでスクロールすると、画像とともに消えていく。


場所はどのように指定する?

場所の指定は、top / bottom / left / rightで調整する。

横の場所指定は、レスポンシブを考えると、%などで指定すると良いと思う。

-Technology, ホームページ作成