第4回は、立体的なレイアウトを組むことが出来るよう、要素の配置に関わるCSSプロパティ=position（Relative配置、Fixed配置、Absolute配置）と、要素の重なり順を指定するプロパティ=z-indexについて学びます。
CSSプロパティ
CSSプロパティとは、外見に関する設定（=どのような見た目、装飾にしたいかを決めるためのもの）
CSSプロパティ自体については以下の記事も参考に
CSSとは
HTMLで記述された文章をブラウザでどのように表示するかを定義するための言語。
CSSにはいろいろな種類（スタイル）が存在しており、それらを組み合わせて表現することができる。
- 文字の色、サイズ、行間、行揃えなどの指定
- 背景色、背景画像、ボーダー、角丸などの指定
- レイアウト、余白の調整
プロパティとは
CSSのスタイルの種類のこと。
文字サイズを変更したい場合の「font-size」、背景色を変更したい場合の「background-color」などのことを指す。
Position、z-indexを効果的に活用している参考サイト
Positionプロパティについて
Positionプロパティは要素の配置に関する設定。
STUDIOで指定できるPositionプロパティの値は、以下の3種類。
- Relative(相対的)配置 ←STUDIOでは基本的はこちらが設定される
- Fixed(固定ボックス)配置
- Absolute(絶対固定)配置
Relative(相対的)配置
現在の位置を起点とし、位置を動かすと周囲の要素にも影響する
Fixed(固定ボックス)配置
ブラウザの画面を基準に、左上を起点として固定配置が可能
Absolute(絶対固定)配置
最も近い親要素relativeを起点として固定配置が可能
absoluteだけでは具体的な位置指定が出来ない為、親要素にrelativeを指定する必要がある
STUDIOではグループ親要素の中身である子要素の配置変更を行う場合、relativeとabsoluteからしか選択できません。
Web制作の知識としてabsoluteを設定するためには親要素が必要と覚えておこう。
z-indexについて
z-indexは要素の重なり順を指定するCSSのプロパティで、position プロパティと一緒に使う。
STUDIOで指定できる値は0,1,2,3,4,5,-1,-2,-3であり、何も指定していない場合は0になる。
マイナスの値を指定すると、何も指定していない要素よりも下に配置される。
「机上に重なった用紙」をイメージするとより理解できるかも？
イラストレーターやフォトショップに慣れている人は、レイヤーの階層構造を想像してもらえると◎
