top、right、bottom、left は、ボックスの配置位置を指定するプロパティです。
この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効となります。
div {
position: absolute;
top: 10px;
left: 30%;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| top | 数値+単位（px 等）またはパーセント | 上からの距離を指定 |
| right | 数値+単位（px 等）またはパーセント | 右からの距離を指定 |
| bottom | 数値+単位（px 等）またはパーセント | 下からの距離を指定 |
| left | 数値+単位（px 等）またはパーセント | 左からの距離を指定 |
各プロパティの初期値は auto（自動）です。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: #85b9e9;
position: absolute;
}
div.example1 {
top: 50px;
left: 150px;
}
div.example2 {
top: 200px;
left: 50px;
}
</style>
</head>
<body>
<div class="example1">ボックス1</div>
<div class="example2">ボックス2</div>
</body>
</html>
表示例
- サイト内検索
