position プロパティと top、right、bottom、left プロパティを組み合わせて使用します。
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
| position | relative を指定します |
|---|
position プロパティについては、「ボックスの配置方法を指定する」をご覧ください。
| top | 上からの距離を指定します |
|---|---|
| right | 右からの距離を指定します |
| bottom | 下からの距離を指定します |
| left | 左からの距離を指定します |
それぞれ 数値+単位（px、他）か %（割合）で指定します。
top、right、bottom、left プロパティについては、「ボックスの位置を指定する」をご覧ください。
【指定方法】
通常の位置から右下に1px移動させたい場合は、
position: relative; … 通常の位置を基準とした相対的な位置指定
top: 1px; … 上からの距離を指定（下に1px移動）
left: 1px; … 左からの距離を指定（右に1px移動）
上記の3つのプロパティを指定します。
また、右下に移動すると同時にリンクの下線を消したい場合には、text-decoration: none; も指定しておきます。（指定方法は「ポイントしたときに下線を消す」をご覧ください）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p><a href="index.html">リンクカテゴリー</a></p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
