position, top, bottom, left, rightの使い方

position, top, bottom, left, right

プロパティの説明

positionは、要素の配置を通常配置にするか、絶対配置にするか、相対配置にするかを決めるプロパティです。全ての要素に指定することができます。

top, bottom, left, rightは、positionで決めた配置からの位置を決めるプロパティです。全ての要素に指定することができます。

指定できる値

static: positionに指定：標準設定。通常の配置にする。
relative: positionに指定：相対配置にする。
absolute: positionに指定：絶対配置にする。
CSSで使える数値: top, bottom, left, rightに指定：positionで決めた配置からの距離を決める。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .p1{position:relative; top:100px; left:100px;}
 .p2{position:absolute; top:10px; left:300px;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <div>
  <p class="p1">div要素から下に100px, 右に100pxの位置に設定。</p>
  <p class="p2">一番上から下に10px, 右に300pxの位置に設定。</p>
 </div>
</body>

</html>