[CSS] position fixedとposition absoluteの使い方

ホームページ作成

# #

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、Javascriptを使ったwebサイトの作り方についての記事をまとめた。


HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ

続きを見る


また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。


コンピューターサイエンスとITの全体像

続きを見る

Related posts