positionプロパティで要素を配置

positionプロパティで要素を配置

positionプロパティとは

• positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです
  • 要素を自由に配置したい
  • 要素の重なり順を変えたい
  • ヘッダーを固定して表示したい

positionプロパティの使い方

• positionプロパティを用いて、要素を配置する
  1. 動かしたい要素の基準を決める
  2. 動かしたい要素を決める
  3. 基準からどれだけ動かしたいか決める
  4. 要素の重なり順を決める

動かしたい要素の基準を決める

.relative{
 position: relative;
}

動かしたい要素を決める

.absolute{
 position: absolute;
}

基準からどれだけ動かしたいか決める

.absolute{
 position: absolute;
 top: 50%;
 left: 100px;
}

距離を記述するプロパティ

• topプロパティ
• bottomプロパティ
• leftプロパティ
• rightプロパティ

要素の重なり順を決める

.absolute01{
 position: absolute;
 top: 0;
 left: 100px;
 z-index: -100;
}
.absolute02{
 position: absolute;
 top: 30%;
 left: 300px;
 z-index: 100;
}

positionの種類

static

• staticは初期値です
• 要素に対しpositionプロパティを何も指定されていない場合はstaticの状態になります
• 位置を動かすことはできない
• 距離指定プロパティで位置を調整することはできない
• z-indexで重なり順を指定することはできない

relative

• 現在の位置を基準に、相対的な位置を決めます
• 親要素にrelativeを指定して基準にし、子要素にabsoluteを指定することで、子要素を移動します
• 距離指定のプロパティを設定しなければ、staticと同様の表示位置になる
• 距離指定のプロパティを設定すれば、位置調整が可能
• 「現在の位置」が基準。要素自身を動かしたとしても、基準の場所には要素分の高さが残る
• 単体で指定して位置を動かす使い方はあまりせず、absoluteとセットで使用することが多い。
• z-indexで重なり順を指定する事が可能

absolute

• 親要素を基準に絶対的な位置を決めます
• 親要素を基準に、距離指定のプロパティで設定した位置に表示されます
• absoluteに指定された要素は、元々の配置されていた場所からはその要素の高さが無くなる
• relativeとセットで使用する
• 親要素を基準とし、要素の移動が可能
• z-indexで重なり順を指定する事が可能

fixed

• 画面の決まった位置に要素を固定します
• 指定方法・特徴はabsoluteとほぼ同じと考えてOKです

sticky

• stickyは、日本語訳で粘着という意味があります
• 追従する範囲を指定できる
• 追従が開始されるとfixedのように要素が固定される