| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| position: | 配置方法 | CSSで追加される内容以外 | なし |
| 値 | 説明 | |
|---|---|---|
| 配置 方法 | static | 通常の方法で要素を配置します。top,left,right,bottomプ ロパティで指定した値は無効止まります。(デフォルト) |
| relative | 通常の方法で表示される位置を基準として、相対的に指定 した位置に配置します。この後に続く要素は、指定された要素 が本来の位置に表示されている場合と同様に配置されます。 | |
| absolute | 親要素の位置を基準として、絶対的に指定した位置に配置しま す。この指定をすると、その部分は通常の配置とは別に扱われ るようになる為、他の要素の配置には一切影響を与えなく なります。 | |
| fixed | 親要素の位置を基準として、絶対的に指定した位置に配置し ます。位置は固定されスクロールしても移動しません。 この指定をされた要素は通常の配置とは別に扱われるよう になる為、他の要素の配置には一切影響を与えなくなります。 |
要素の表示位置を決めるための配置方法は、positionプロパティで指定しま
す。通常はHTMLで指定した順に上から要素が配置され
ますが、基準となる位置を指定して、その位置からの距離で配置場所を指定できるようにします。配置方法には、static,relative,absolute,fixedのいずれかを指定します。配置する位置は、top,left,right,bottomプロラティで指定します。
す。通常はHTMLで指定した順に上から要素が配置され
ますが、基準となる位置を指定して、その位置からの距離で配置場所を指定できるようにします。配置方法には、static,relative,absolute,fixedのいずれかを指定します。配置する位置は、top,left,right,bottomプロラティで指定します。
■fixedは、Internet Explorerには対応していません。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
.sampl{width:200px;
background-color: yellow;
font-size:18px;
text-align:center;
}
p{color:red}
.pos01{position:relative;
top:50px;
left:100px;
}
.pos02{position:absolute;
top:100px;
left:100px;
width:200px;
}
-->
</style>
</head>
<body>
<div class="sampl">金閣寺</div>
<div><img class="pos02"又はclass="pos01" src="画像ファイルＵＲＬ" widht="200" height="150" ></div>
<p>何も配置方法を指定していない、<br>通常の配置です。</p>
</body>
</html>
