本日はpositionについて。
要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。
Contents
positionの使い方
相対配置 relative
相対配置は通常表示される位置から指定した距離だけ表示位置をずらすことができます。相対位置の場合、後続の要素に影響がなく、移動前の位置のサイズがそのまま確保されている。
ただしrelativeは位置をずらす目的で使用されることはあまりなく、内容する要素の基準位置を変更する場合や重なり位置の変更という目的で使用されることが多い。
絶対位置 absolute
absoluteの場合、後続の位置が詰めて表示される。要素にサイズを指定していない場合、内包されるコンテンツに合わせて縦横サイズが伸縮する。
abosoluteを指定している場合の基準位置は、親要素にpositionプロパティのstatic以外が指定されていると、そのボックスを基準に配置される。一般的には親をrelativeにして、新しい親を基準にすることになる。
固定配置 fixed
fixedはウィンドウの左上隅を常に基準として配置を行う。absoluteとの違いは、スクロールをしてもその位置を維持したままスクロールする点にある。ヘッダやフッターなどスクロールをしても常に画面上に表示しておきたい場合に使われることが多い。
z-indexプロパティ
相対配置と固定配置も含む絶対配置になっている要素は、通常、HTMLの後方のものほど前面に表示される。重なり順を変更する場合z-indexプロパティを指定することで、順序を変えることができる。順序の指定には整数を使い、0を基準に値の大きいものほど前面に表示される。
配置が崩れる場合のチェックポイント
floatした要素が崩れる意図せずに崩れてしまう場合
横幅と余白を確認
float要素が崩れる原因の多くは、回り込ませて横並びにしている要素のサイズが親の要素のサイズ以上になっていることによって起きている。くずれが発生した場合、まず並べている要素のwidth,padding,border,margin等のサイズを確認してほしい。特にwidthがない場合要注意。
floatした要素が親要素からはみ出してしまう場合
floatした要素が親要素からはみ出している場合は、親要素から見て中に何も含まれていないとなっているケースが多い。その場合、必ず指定した後にclearを指定して、高さを意図通りにするのがポイントになる。
その他、floatを使う際のポイント
- floatする要素は必ずwidthを指定する
- floatとwidthを指定した要素にはボーダーや余白を指定せず、内包する要素で指定する
- float後は必ずclearを指定する
positionで気を付けることなど
絶対配置で意図した場所に表示されない場合
基準点にしたいブロックにrelativeを指定し、この要素を親要素とする。
絶対配置を指定した親要素の高さがなくなる場合
絶対配置を指定したabsoluteは通常の配置から切り離されてしまうため、高さがなくなってしまい、親要素に背景を入れて表現する場合は思った通りの背景が出ないことがある。内包する要素を絶対配置する場合、親要素の高さが足りなくなるため、親要素自体にheightやmin-heightなどの指定を入れて、高さを確保していく
