top, right, bottom, left: 距離
top, right, bottom, leftは、ボックスの各位置(上、右、下、左)かの配置位置を指定するプロパティです。
top: 値; (上からの距離を指定)
right: 値; (右からの距離を指定)
bottomt: 値; (下からの距離を指定)
left: 値; (左からの距離を指定)
positionプロパティと組み合わせて使用します。position プロパティでボックス位置を指定し、そのボックスに対しての距離を指定します。
top, right, bottom, left プロパティ仕様
値 | |
---|---|
実数 | px / em / % / ex / in / cm / mm / pt / pc |
auto | デフォルト "position:relative; top:0;" と同値 |
記述例
値は、負(−)の指定もできます。負(マイナス)を指定した場合は逆向きの位置に動きます。パーセントで指定をした場合は、親ボックスの高さに対して下からの割合になります。
サンプル − 配置位置を指定
sample css ↓
.sample {
position: absolute;
top: 50px;
left: 100px;
width: 450px;
height: 200px;
text-align: center;
border: 1px solid #999;
background-color: #fcf;
}
html ↓
<html>
<body>
<div class="sample">配置位置</div>
</body>
</html>
実際の見え方 ↓