Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

絶対的な位置指定

■ 絶対的な位置指定

「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>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial