(hover) position: relative;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The position property sets how a box will be positioned, and the top, right, bottom, and left properties specifies the display position of the box.

When you set these properties with pseudo-classes for the A element, the text of the link can be moved according to the state of the link.

In the following examples, the text is moved only when you mouse over the link.


a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
Property Value Explanation
position relative the relative position from the normal position
Property Value Explanation
top length, %, or auto the distance from the top side
right length, %, or auto the distance from the right side
bottom length, %, or auto the distance from the bottom side
left length, %, or auto the distance from the left side

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}

</style>

</head>
<body>

<p><a href="index.html">Link Styles</a></p>

</body>
</html>
Output

Link Styles