スタイルシートリファレンス > position

スタイルシートリファレンス position


position 配置方法を指定する (IE4/N4)

ボックスの配置方法を指定します。

static
指定なし:規定値
relative
相対位置への配置
absolute
絶対位置への配置
fixed
画面のスクロールに対して固定 (N4)

absoluteを指定して親要素がある場合、親要素にrelativeまたはabsolute が指定されている場合には、親要素左上が基準位置になります。

それ以外はウィンドウ左上が基準位置になります。

▲ページ先頭へ

使用例 position

static,relative,absolute,fixed の表示例

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
div {
background-color: #ffff00;
position:relative;
}
#smp1 {
background-color: #00ff00;
top:10px;
left:10px;
position:static;
}
#smp2 {
background-color: #00ff00;
top:10px;
left:10px;
position:relative;
}
#smp3 {
background-color: #00ff00;
top:10px;
left:10px;
position:absolute;
}
#smp4 {
background-color: #00ff00;
position:fixed;
}
-->
</style>
</head>
<body>
<div>このように<span id="smp1">staticの場合は表示されます</span></div><br>
<div>このように<span id="smp2">relativeの場合は表示されます</span></div><br>
<div>このように<span id="smp3">absoluteの場合は表示されます</span></div><br>
<div>このように<span id="smp4">fixedの場合は表示されます</span></div><br>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示

このようにstaticの場合は表示されます

このようにrelativeの場合は表示されます

このようにabsoluteの場合は表示されます(親要素にrelativeを指定)

このようにfixedの場合は表示されます

▲ページ先頭へ

関連項目【配置・表示】

display
ブロック、インラインなど表示形式を指定する
position
配置方法を指定する
top
上からの配置位置を指定する
bottom
下からの配置位置を指定する
left
左からの配置位置を指定する
right
右からの配置位置を指定する
float
左または右に寄せて配置する
clear
回り込みを解除する
z-index
重なりの順序を指定する
direction
文字の表示方向を指定する
unicode-bidi
ユニコードの文字表示の方向を指定する
overflow
はみ出た内容の表示方法を指定する
overflow-x
はみ出た内容横方向の表示方法を指定する (IE5)
overflow-y
はみ出た内容縦方向の表示方法を指定する (IE5)
clip
表示する範囲を指定する
visibility
表示するしないを指定する

▲ページ先頭へ

スタイルシートリファレンス > position