positionとは
- ここで説明する position とは次の語句からなるCSSのプロパティです。
- position
- 読み: ポジション
意味: 位置、場所
positionプロパティの概要
このプロパティは、文書内で要素がどのように配置されるかを設定することができます。
配置される位置は、 left、 right、 bottom、 top で設定します。 また、要素の重なりについては、 z-index で設定します。
position はキーワード値を使って要素の再配置を指定することになりますが、そのキーワードにより、 left、 right、 bottom、 top の扱われ方が異なります。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{position: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
このサンプルでは、div要素に予め位置を指定するプロパティを設定しています。設定は下記の通りです。
この位置設定が、position のキーワードによって、どのように扱われるかを確認できるサンプルとなっています。 position のキーワードはサンプルの下部にあるプルダウンメニューから変更することができます。
キーワード値:
staticstatic は既定値です。 このキーワードを設定すると通常のフローに従って要素は配置されます。 つまり、bottom, left, right, top, z-index プロパティの効果はありません。
position:
div{
position: keyWord;
top: 50px;
left: 200px;
background-color: ##khaki;
border: thin solid ##darkgray;
margin: 10px;
}