CSSでposition fixedとposition absoluteの使い方について説明する。
画像に文字を重ねてレイアウトした時に、スクロールしても高さが固定されるもの(ヘッダー)と固定されないもの(メッセージ部分)で使い分けてるところに注目。
position fixedの使い方
position fixedを使用することにより、ある高さで固定される。
See the Pen Position Fixed Demo by Shotaro Kamimura (@shotarokamimura) on CodePen.
このコードでは、青のrectangle2にposition:fixedをかけることで、要素が浮いて、グレーの四角より上にスクロールしても、高さが固定されるようになる。
z-indexを使うことで、高さも調整することができる。
今回は
- rectangle 1 : z-index 2
- rectangle 2 : z-index 1
で調整しているため、rectangle 1が上に来る。
position absoluteを使うと?
rectangle1はposition absoluteなので、要素が浮き、グレーの四角の上に要素が表示されるようになるが、高さは固定されない。
なのでスクロールすると、画像とともに消えていく。
場所はどのように指定する?
positionを使った時の場所の指定は、top / bottom / left / rightで調整する。
横の場所指定は、レスポンシブを考えると、%などで指定する。
HTML・CSSサイトの作り方の関連記事
下記の記事でHTML・CSSをウェブ上に表示させる方法からヘッダーやカラム作成、レスポンシブ対応、画像の扱いなど、HTML・CSSでのサイトの作り方をまとめている。
● HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ
コンピュータの全体像
ウェブサイト作成という分野において、コンピュータの全体像を把握することも大切だ。コンピュータの構造、ネットワークや通信プロトコル、ウェブ技術など、ベースとなる知識を持っていることでウェブサイトの制作や運営においてより高度な問題解決や効率的な開発が可能となる。
下記にコンピューターの基礎やITの全体像についてもまとめている。
コメントを残す