絶対的な位置指定
position:absolute 絶対位置であることを示す top:距離 上からの距離 bottom:距離 下からの距離 left:距離 左からの距離 right:距離 右からの距離 「position:absolute」と距離を指定するプロパティは、指定された要素を絶対的ない地で指定して配置します。
この指定をされた要素は、通常の配置とは別に扱われるようになるため、他の要素の配置には一切影響を与えません。
topプロパティは上から親ボックスの上から指定した要素のボックスの上までの距離、bottomプロパティは親ボックスの指定から指定した要素のボックスの下までの距離、leftプロパティは親ボックスの左から指定した要素のボックスの左までの距離、rightプロパティは親ボックスの右から指定した要素のボックスの右までの距離を指定します。HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>絶対的な位置に配置する</title>
<style type="text/css">
<!--
body {
color: #000000;
background: #ffffff url(grid.gif)
}
p {
position: absolute;
top: 150px;
left: 250px;
width: 150px;
height: 50px;
margin: 0;
padding: 25px;
font-weight: bold;
color: #ffffff;
background: #ff3300
}
-->
</style>
</head>
<body>
<h1>絶対配置</h1>
<p>
上から150ピクセル<br>
左から250ピクセル
</p>
</body>
</html>