positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。
positionプロパティで指定するのは、配置方法(基準位置)のみです。
実際の表示位置の指定には、
top、
bottom、
left、
rightを併用して、基準位置からの距離を設定する必要があります。
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>
<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の場合の表示