トップページへ |
|
トップページ > スタイルシートリファレンス > position
★スタイルシートリファレンス
|
position･････ボックスの配置方法（基準位置）を指定する
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample {height:50px; background-color:#00ff00; font-weight:bold; position:relative }span.sample1 {color:#ff0000; position:static; top:10px; left:10px } span.sample2 {color:#ff0000; position:relative; top:10px; left:10px } span.sample3 {color:#ff0000; position:absolute; top:10px; left:10px } span.sample4 {color:#ff0000; position:fixed; top:10px; left:10px } HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample">position:static<span class="sample1">staticの場合の表示</span></p> <p class="sample">position:relative<span class="sample2">relativeの場合の表示</span></p> <p class="sample">position:absolute<span class="sample3">absoluteの場合の表示</span></p> <p class="sample">position:fixed<span class="sample4">fixedの場合の表示</span></p> </body> </html> ↓↓↓ ブラウザ上の表示position:staticstaticの場合の表示 position:relativerelativeの場合の表示 position:absoluteabsoluteの場合の表示 position:fixedfixedの場合の表示 ■関連項目
overflow････････････････はみ出た内容の表示方法を指定する
overflow-x･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） overflow-y･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） position････････････････ボックスの配置方法（基準位置）を指定する top････････････････････上からの配置位置（距離）を指定する bottom････････････････下からの配置位置（距離）を指定する left････････････････････左からの配置位置（距離）を指定する right･･･････････････････右からの配置位置（距離）を指定する display･････････････････要素の表示形式（ブロック・インライン）を指定する float･･･････････････････左または右に寄せて配置する clear････････････････････回り込みを解除する z-index･･････････････････重なりの順序を指定する visibility･････････････････ボックスの表示・非表示を指定する clip･････････････････････ボックスを切り抜き表示（クリッピング）する direction････････････････文字表記の方向（左右）を指定する unicode-bidi･････････････Unicodeの文字表記の方向を上書きする writing-mode････････････文字表記の方向（縦横）を指定する（IE独自の仕様） |
トップページ > スタイルシートリファレンス > position
トップページへ |
|
©2013 HTMQ