Это делается элементарно при помощи
position и
z-index.
Вот Вам готовый пример, думаю, быстро разберетесь:
Код:
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
<tr><td class="eText" colspan="2"><style>
.Button2 {
position:relative;
z-index:2;
font-family: verdana;
width:400px;
text-decoration: none !important;
background-color:#fff;
padding-left: 40px;
padding-right: 40px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #000;}
.area {
position:relative;
z-index:1;
font-family: verdana;
width:80%;
text-decoration: none !important;
background-color:#ffffe1;
margin-left:20px;
margin-right:20px;
margin-top:-20px;
margin-bottom:20px;
padding-top:40px;
display: inline-block;
border: 1px solid #000;}
</style>
<a class="Button2">Предисловие</a>
<a class="area">ПРЕДИСЛОВИЕ — вводная статья критического, текстологического, исторического и т. п. содержания,
предпосылаемая книге, чтобы сообщить читателю те или другие сведения, которые по мнению автора, редактора или издателя
необходимы для лучшего понимания последней. В дальнейшем речь идет только о П. к художественным произведениям.
</a> </td></tr></table>