Överlappande Lager?

Jag vill att det andra lagret skall lägga sig över det första när jag väljer att "visa" det, nu lägger sig det andra lagret under det första.

<div align="left" style="position:relative;"> 
              <textarea name="textfield" cols="40" rows="3"></textarea>
            </div> 
            <div id="lager" style="position:absolute; visibility:hidden;" left:2px; top:2px>
            123
</div>

Har du kikat på z-index?
http://www.devguru.com/Technologies/css/quickref/css_zindex.html

:)

Nu ser det ut så här:

<div style="position:relative;"> <div align="left" style="position:absolute;z-index:1;"> 
              <textarea name="textfield" cols="40" rows="3"></textarea>
            </div> 
            <div id="lager" style="position:absolute;z-index:2; visibility:hidden;">
            123
</div></div>

Visserligen överlappar de varandra, men hamnar utanför och för långt ner i min tabell. Det måste väl vara position:relative, om de skall hamna i tabellen?
(skapade ett 3:de lager av den anledningen)

Några idéer?

är det något sådant här du menar?

<script type="text/javascript">

function swap()
{
document.all('lager').style.zIndex=2;
document.all('lager').style.visibility="visible";
document.all('texten').style.zIndex=1;
}
</script>

<div style="position:relative;"> <div id="texten" align="left" style="position:absolute;z-index:2;"> 
              <textarea name="textfield" cols="40" rows="3"></textarea>
		<input type="button" onclick="swap()" value="ändra">
            </div> 
            <div id="lager" style="position:absolute;z-index:1;visibility:hidden;">
            123
</div></div>

Denna kod fungerar dock bara i IE. Om du vil få den att funger i övriga får du ju göra en vacker browsersniffer-funktion.

Gamla NS använder sig av dessa om jag inte missminner mig:

document.layer['lager']
document.layer['texten']

Och nya NS samt de andra DOM-läsarana använder detta:

document.getElementById('lager')
document.getElementById('texten')

Exakt vad jag behövde! Jag skall trixa lite så att jag får till det i N.S oxo. Återkommer.

Har försökt att trixa lite men den säger att objektet krävs:

<script language="Javascript">
function swap(){
browserVer=parseInt(navigator.appVersion);
browserName=navigator.appName;
if (browserName == "Microsoft Internet Explorer")
{
document.all('lager').style.zIndex=2;
document.all('lager').style.visibility="visible";
document.all('texten').style.zIndex=1;
} 
else {
document.getElementById('lager').style.zIndex=2;
document.getElementById('lager').style.visibility="show";
document.getElementById('texten').style.zIndex=1;
}
}
</script>

Vad kan vara fel?

Gör såhär istället:

<script language="Javascript">
function swap(){
if (document.all)
{
document.all('lager').style.zIndex=2;
document.all('lager').style.visibility="visible";
document.all('texten').style.zIndex=1;
} 
else if (document.getElementById){
document.getElementById('lager').style.zIndex=2;
document.getElementById('lager').style.visibility="show";
document.getElementById('texten').style.zIndex=1;
}
else if (document.layers){
document.layers['lager'].style.zIndex=2;
document.layers['lager'].style.visibility="show";
document.layers['texten'].style.zIndex=1;
}
}
</script>

Liten korrigering, det borde vara:

document.getElementById('lager').style.visibility="visible";

Nej, det ser fortfarande konstigt ut. Jag har trixat nu med detta hur mycket som helst.
Jag vill att lagret/lagerna skall ligga i tabellen!

Se exempel

Om jag sätter relative så kan jag få textfältet(formen) att ligga rätt, men då hamnar "123-lagret" under men det skall ju lägga sig över textfältet ju.

Det beror på att höjden i den övre tabellen är upptvingad till 90 pixel utan att det finns något innehåll i cellen som ockuperar plats (ett lager gör det ju inte eftersom det är löst flytande). Eftersom default-värdet för vertical align i en cell är "middle" så blir "insättningspunkten" (det som blir top-vänster på lagret) mitt i cellen. Prova att sätta valign="top" i den första cellen.

<table width="400" border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFFCC" height="90">
  <tr> 
    <td valign="top"> 

...osv...

Tack!
Det var alltså inte svårare. :r