| 値 (value) | 長さ | 巾や高さの単位参照。マイナスも指定出来ます。 |
| ％ | top,bottom : 親要素の高さの割合 left,right : 親要素の幅の割合 | |
| auto | 自動。プロパティを指定しないのと同意。 | |
| inherit | 親要素からの継承 | |
| 適用要素 | positipnプロパティと同時に指定します。 | |
| 初期値 | auto | |
| 継承 | しません | |
XXXX はスタイルシート記述です。
XXXX はHTML記述です。
XXXX 背景色と内枠線は修飾対象要素の範囲です。
XXXX 背景色と外枠線は親要素です。
position 指定無しの表示を
鳥啼く声す夢覚ませ
見よ明け渡る東を
空色映えて沖つ辺に
帆船群れ居ぬ靄の中
とします。
本来の位置からの相対位置指定位置に表示します。
| .pr1 | { | position | : | relative | ; | /* 相対位置指定 */ | |
| top | : | 0.5em | ; | } | /* 上から0.5em */ | ||
| .pr2 | { | position | : | relative | ; | /* 相対位置指定 */ | |
| bottom | : | 0.5em | ; | } | /* 下から0.5em */ | ||
| .pr3 | { | position | : | relative | ; | /* 相対位置指定 */ | |
| right | : | 0.5em | ; | } | /* 右から0.5em */ | ||
| .pr4 | { | position | : | relative | ; | /* 相対位置指定 */ | |
| right | : | 0.5em | ; | } | /* 左から0.5em */ | ||
| .pr5 | { | position | : | relative | ; | /* 相対位置指定 */ | |
| top | : | -0.5em | ; | } | /* 上から-0.5em */ |
鳥啼く声す夢覚ませ
見よ明け渡る東を
空色映えて沖つ辺に
帆船群れ居ぬ靄の中
親要素の左上を原点とした絶対位置に表示します。
| .oya | { | position | : | relative | ; | } | /* oyaを原点とします */ |
| .pa1 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| top | : | 0em | ; | } | /* 最上部 */ | ||
| .pa2 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| bottom | : | 0em | ; | } | /* 最下部 */ | ||
| .pa3 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| right | : | 0em | ; | } | /* 最右部 */ | ||
| .pa4 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| left | : | 0em | ; | } | /* 最左部 */ | ||
| .pa5 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| top | : | 50% | ; | /* 上から 50% */ | |||
| right | : | 40% | ; | } | /* 右から 40% */ | ||
| .pa6 | { | position | : | absolute | ; | /* 絶対位置指定 */ | |
| top | : | 100% | ; | /* 上から 100% */ | |||
| left | : | 50 | ; | } | /* 左から 50% */ |
右下
左上
右上 左下 上から 50% : 右から 40% 上から 100% : 左から 50%
赤外枠が親要素の範囲です。
親要素の左上を原点とした絶対位置に表示しますが、画面をスクロールしても、表示位置は固定です。
このサイトの右側の上下に表示している道標部のスタイルシート記述です。IE6では反映されていません。
| .dh | { | position | : | fixed | ; | |
| top | : | -0.4em | ; | |||
| right | : | 0.25em | ; | |||
| padding | : | 0em 0.2em | ; | |||
| margin | : | 0.5em 0em 0.5em 0.5em | ; | |||
| border | : | 1px #008 dotted | ; | |||
| background | : | url(smp/dh.png) fixed | ; | |||
| font-size | : | 75% | ; | |||
| text-align | : | center | ; | |||
| z-index | : | 10 | ; | } | ||
| .dh:hover | ||||||
| { | outline | : | double #00c 3px | ; | ||
| padding | : | 0.16em 0.5em | ; | |||
| border-style | : | none | ; | |||
| font-size | : | 100% | ; | } | ||
| .dh1 | { | position | : | fixed | ; | |
| top | : | -0.6em | ; | |||
| right | : | 0.25em | ; | |||
| padding | : | 0em 0.2em | ; | |||
| margin | : | 0.5em 0em 0.5em 0.5em | ; | |||
| border | : | 1px #008 dotted | ; | |||
| background | : | url(smp/dh.png) fixed | ; | |||
| font-size | : | 75% | ; | |||
| text-align | : | center | ; | |||
| z-index | : | 10 | ; | } | ||
| .dh1:hover | ||||||
| { | outline | : | double #00c 3px | ; | ||
| padding | : | 0.16em 0.5em | ; | |||
| border-style | : | none | ; | |||
| font-size | : | 100% | ; | } | ||
IE6での表示です。fixed が反映されませんので、表示ページの上下に道標部が表示されるようにしています。この表示は、スクロールと同期して移動します。