I'm having a problem positioning a hotspot (should be a rectangle 230px wide by 88px high) over an image in a web page header. Rather than appearing over top of the image using the coordinates defined in the CSS, it displays right before the image. What am I doing wrong?
Here's what I have:
HTML
<div class="art-Header">
<jdoc:include type="modules" name="Search-box" />
<div class="art-Header-jpeg">
<a href="
http://www.agro-k.com/index.php?option=com_alfcontact&Itemid=148" class="hotspot" title="Contact Us"> </a>
</div>
</div>
CSS
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 30;
left: 0;
width: 906px;
height: 150px;
background-image: url('../images/Header.png'
);
background-repeat: no-repeat;
background-position: center center;
}
div.art-Header-jpeg .hotspot a
{
width: 130px; height: 88px;
position: absolute;
top: 567px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
left: 44px; /* Left coord of hotspot (right: 20px is also valid); */
z-index:100;
}
Can you share link for this problem you are facing, so that we can get bette clear picture what you want.