overflowプロパティ

要素の表示や配置に関するスタイルを紹介します。

displayプロパティ

ボックスの表示形式を変更します。表示形式は以下のとおりです。

block（ブロックレベル要素のデフォルト）: ブロックレベル形式で表示します。
inline（インライン要素のデフォルト）: インライン形式で表示します。
inline-block: インラインブロックレベル形式で表示します。
none: 存在しないものとして処理します。

ボックスの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 高さ、幅の指定を無視してすべて表示します。
hidden: 高さ、幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll: スクロールバーを表示します。
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

overflow-xプロパティ

ボックスの幅の内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 幅の指定を無視してすべて表示します。
hidden: 幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll: スクロールバーを表示します。
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

overflow-yプロパティ

ボックスの高さの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 高さの指定を無視してすべて表示する。
hidden: 高さの指定により範囲内のみ表示。また、回り込み(float)の親要素に指定して、回り込みを解除する。
scroll: スクロールバーを表示
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

positionプロパティ

要素の配置方法を指定します。配置方法は以下のとおりです。

static（デフォルト）: 通常通りの配置をします。
relative: 通常通りの位置からの相対的な位置で指定します。また、絶対位置指定(absolute)の親要素に指定して、位置の基準とします。
absolute: 親要素に対して絶対的な位置で指定をします。（left/right/top/bottomプロパティを使用）
fixed: 位置を固定して配置します。

leftプロパティ

左からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

rightプロパティ

右からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

topプロパティ

上からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

bottomプロパティ

下からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

z-indexプロパティ

絶対位置指定(absolute)するときの、要素の重ね順を指定します。

数値: 整数で指定し、値が大きいほうが上（手前）に表示され、値が小さい方が下（奥）に表示され、上のものに隠れます。

floatプロパティ

画像やボックスをフロートさせ、寄せて配置し、後続するボックスを回りこませます。フロートの種類は以下のとおりです。

left: 左に寄せて、下の要素を右に回りこませます。
right: 右に寄せて、下の要素を左に回りこませます。
none（デフォルト）: フロートしません。下の要素も回りこみません。

clearプロパティ

floatプロパティにより設定された、フロートを解除します。解除の種類は以下のとおりです。

left: 左のフロートのみ解除します。
right: 右のフロートのみ解除します。
both: 両方のフロートを解除します。

タグ: overflowプロパティ

表示と配置のスタイル