---
title: "Överlappande Lager?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/57718-överlappande-lager"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Jesper T"
published: "2002-11-01T10:43:07.000Z"
updated: "2002-11-02T23:29:14.000Z"
replies: 11
views: 329
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/57718-överlappande-lager"
---

# Överlappande Lager?

## #1 — Jesper T, 2002-11-01T10:43Z

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>
```

Permalänk: https://www.webforum.nu/p/57718

## #2 — trexter.com, 2002-11-01T10:50Z

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

 :)

Permalänk: https://www.webforum.nu/p/842229

## #3 — Jesper T, 2002-11-01T11:08Z

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)

Permalänk: https://www.webforum.nu/p/842242

## #4 — Jesper T, 2002-11-02T10:52Z

Några idéer?

Permalänk: https://www.webforum.nu/p/842807

## #5 — colione, 2002-11-02T14:03Z

ä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')
```

Permalänk: https://www.webforum.nu/p/842878

## #6 — Jesper T, 2002-11-02T16:08Z

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

Permalänk: https://www.webforum.nu/p/842947

## #7 — Jesper T, 2002-11-02T16:50Z

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?

Permalänk: https://www.webforum.nu/p/842973

## #8 — colione, 2002-11-02T16:55Z

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>
```

Permalänk: https://www.webforum.nu/p/842981

## #9 — Jojoxx, 2002-11-02T18:52Z

Liten korrigering, det borde vara:

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

Permalänk: https://www.webforum.nu/p/843073

## #10 — Jesper T, 2002-11-02T22:39Z

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](http://member.webforum.nu/Jesper%20T/fel.html)

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.

Permalänk: https://www.webforum.nu/p/843264

## #11 — Jojoxx, 2002-11-02T22:54Z

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...
```

Permalänk: https://www.webforum.nu/p/843274

## #12 — Jesper T, 2002-11-02T23:29Z

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

Permalänk: https://www.webforum.nu/p/843281

---

Tråden på webben: https://www.webforum.nu/amne/javascript/57718-överlappande-lager