ボックスの配置方法・配置位置を指定

ボックスの配置方法・配置位置を指定

positionプロパティはボックスの配置方法を指定するプロパティです
topプロパティやrightプロパティfloatプロパティなどと組み合わせて、配置される位置を決定していきます
static通常の配置方法
relative通常の配置方法と同じように配置
左上を基準としてtopプロパティなどとの組み合わせで相対的に配置
absolute絶対的な位置に配置
親要素がstaticの場合、ブラウザの左上が基準
親要素がstatic以外の場合、親要素の左上が基準
fixedブラウザの左上を基準に絶対配置
スクロールしても位置が固定される
stickyrelateiveと同様に通常の配置方法と同じように配置されるが、
スクロールされる親要素に対しては絶対配置・固定される
スクロールに追尾していく広告などによく使われます

static以外の配置方法を選択した場合、以下のプロパティで更に配置位置を指定できます
top :「位置」基準位置上部からの位置
bottom :「位置」基準位置下部からの位置
left :「位置」基準位置左からの位置
right :「位置」基準位置右からの位置
位置の指定に関しては以下の数値を使います
auto(初期値)自動指定
任意の数値+単位基準位置からの距離で指定
%値親要素に対する割合
/*↓div要素のボックスの配置方法を指定*/
div {position:「配置方法」;  }
/*↓div要素のボックスの配置方法を指定して位置を指定の例*/
div {position:「配置方法」; 
     top:「位置」;
     left:「位置」;
}

                

目的別

外部スタイルシートを読み込む
スタイルシートを埋め込む
classを設定する
classやidにスタイルシートを適応させる
ユーザー環境によってスタイルを変更する
訪問済みリンク・未訪問リンクにスタイルを適用
マウスオーバーやアクティブ化した要素にスタイル適用
指定した要素n番目の要素にスタイルを適用
指定した要素のn番目の子要素にスタイルを適用
フォントを設定する
フォントサイズを設定する
フォントの太さを指定する
フォントスタイルを指定する
行の高さを指定する
文字の色を指定する
文章の揃え位置を指定する
文字に線を引く
文字に引かれた線の色を指定
文字に引かれた線のスタイルを指定
文字に引かれた線の太さを指定
文字に傍点をつけ形を指定する
文字の傍点の色を指定
文字に影を作る
表のキャプションの位置を指定
背景に色を付ける
背景に画像を設定する
背景画像の繰り返し方を指定
背景画像の水平垂直位置を指定
背景画像の表示サイズを指定
ページスクロール時の背景画像の表示方法を指定
背景画像の表示されるエリアを指定
背景画像の表示される基準位置を指定
枠線太さを指定する
枠線のスタイルを指定
枠線の色を指定
枠線の角丸を指定
枠線に画像を指定
ボックスの幅と高さを指定
ボックスのマージンを指定
ボックスのパディングを指定
ボックスの配置方法・配置位置を指定
ボックスの重なり順を指定
ボックスの回り込みを指定
ボックスの回り込みを解除
サイズが指定されているボックスに収まらないコンテンツの表示方法を指定
画像や動画の要素をボックスに合わせる方法を指定
ボックスの可視・不可視を指定
ボックスの影を設定
リストマーカーの種類を指定
リストマーカーの位置を指定
カーソルの形を設定
プロパティを段階的に変化させる
画像や文字を加工する