<div> lager-positionering
 

Hallå,

jag försöker placera en absolut-positionerad länk (<a href>) under (dvs. hamna ett lager under) en div som inte är absolut positionerad. Jag lyckas inte få den att hamna under varken genom att lägga den innan det andra lagret i html filen eller genom z-index i CSS filen. En annan sak jag upplever är att jag inte kan klicka länken (inget händer, pekaren byter inte ens utseende) i Firefox, fungerar klockrent i Opera dock (har en event-listener i Jquery kopplad till knappen, javascript konsollen visar inga fel).

Hjälp?

html:
<div id="box"></div>
<a class="button" href="#"><span>CLICK ME</span></a>

css:
#box {height:100px; background:url('../img/box_background.png') repeat-x; width:100%;}
a.button {
position:absolute; top:3px; right:50px; cursor: pointer;
background:url('../img/button_background.png') no-repeat;
display: block;
float: left;
height: 48px;
width:191px;
text-decoration: none;
}

a.button span {
font-size:0.9em;
font-weight:bold;
color:#000;
margin-left:18px;
display: block;
}

z-index fungerar endast på element som har en "position".
Det borde lösa sig genom att sätta "position:relative" på #box-regeln.

Tackar objx, det löste problemet.
Fortfarande går det dock inte att hovra (har en a.button:hover regel) eller klicka på a.button i Firefox. Som sagt det fungerar i andra webbläsare :/

Har du ett div-lager över en länk så är det div-lagret som får händelserna och inte länken.. man kan inte skriva på ett papper i botten om det ligger "20" papper över det.

Precis så var det, jag hade en container-div som jag trodde låg under.
Tack för all hjälp.