---
title: "Ändra värdet på z-index"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/137949-ändra-värdet-på-z-index"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "robbanf"
published: "2005-11-20T09:06:24.000Z"
updated: "2006-10-02T20:51:23.000Z"
replies: 10
views: 670
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/137949-ändra-värdet-på-z-index"
---

# Ändra värdet på z-index

## #1 — robbanf, 2005-11-20T09:06Z

Jag har ett antal layers som jag vill kunna ändra z-index på med ett klick och därmed bestämma vilket som ska ligga överst.
Jag har denna kod:

```
function setZIndex(id, z_index) {
document.getElementById(id).style.zIndex = z_index;
}
```

och

```
<input type="button" value="Den ena" 
onClick="setZIndex('ena','5');
setZIndex('andra','4');">

<input type="button" value="Den andra" 
onClick="setZIndex('andra','5');
setZIndex('ena','4');">
```

Så vill jag inte ha det, det blir väldigt otympligt om jag skulle ha tio olika layers och tio olika knappar.

Kan jag istället helt enkelt bara plussa på 1 på z-index varje gång jag klickar? Hur gör man det? Eller finns det något annat bättre sätt att lösa det på?

/ Robban

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

## #2 — Peter S, 2005-11-20T13:32Z

För att addera 1 till z-index, kan du använda:

```
function setZIndex(...){
   var elm = document.getElementById("foo");
   elm.style.zIndex = parseInt(elm.style.zIndex) + 1;
   ...
```

**Red./ Gjorde en ändring**

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

## #3 — robbanf, 2005-11-20T16:51Z

Tack, men tyvärr kan jag inget alls om javascript (eller nån annan kodning) så jag har lite svårt att få ditt exempel att funka. Ska jag byta ut hela min function setZIndex mot ditt exempel? Hur ska sedan onClick-raden se ut?

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

## #4 — Peter S, 2005-11-20T17:12Z

Hejsan!  :) 

Titta på följande exempel:

```
<script type="text/javascript">

var arr = ["layer1","layer2","layer3","layer4","layer5"];

function setZIndex(id){
  var obj = document.getElementById(id);

  obj.style.zIndex = (function(){
	  var len = arr.length,
              max = document.getElementById(arr[0]).style.zIndex;
	  for (var i = 1; i < len; ++i){
	    var val = document.getElementById(arr[i]).style.zIndex;
	    if (val > max){ max = val }
	  }
	  return max;
	})() + 1;
}

</script>

<style type="text/css">

.layers{
  background-color: #eee;
  border          : 1px solid;
  height          : 90px;
  position        : absolute;
  width           : 150px;
}

</style>

<div id="layer1" class="layers" style="z-index:0; left:100px; top:100px;">Layer1</div>
<div id="layer2" class="layers" style="z-index:1; left:110px; top:110px;">Layer2</div>
<div id="layer3" class="layers" style="z-index:2; left:120px; top:120px;">Layer3</div>
<div id="layer4" class="layers" style="z-index:3; left:130px; top:130px;">Layer4</div>
<div id="layer5" class="layers" style="z-index:4; left:140px; top:140px;">Layer5</div>

<form>
  <input type="button" value="Layer1" onclick="setZIndex('layer1')">
  <input type="button" value="Layer2" onclick="setZIndex('layer2')">
  <input type="button" value="Layer3" onclick="setZIndex('layer3')">
  <input type="button" value="Layer4" onclick="setZIndex('layer4')">
  <input type="button" value="Layer5" onclick="setZIndex('layer5')">
</form>
```

I arr lägger du de id-värden dina element har.

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

## #5 — robbanf, 2005-11-20T19:35Z

Tack för hjälpen! Det fungerar bra i början, men när jag klickat ett tiotal gånger så slutar det fungera. Ingenting alls händer eller så kommer fel lager fram.
Vad kan det bero på? Jag har inte ändrat nånting, förutom det absolut nödvändigaste.

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

## #6 — Peter S, 2005-11-20T20:11Z

Jag lyckas inte reproducera det beteendet. Du får nog bifoga den kod du använder.

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

## #7 — robbanf, 2005-11-21T08:58Z

Jag har testat med din kod rakt av helt oförändrad och det blir samma sak. Dock bara i  Opera så det är där felet ligger. I IE funkar det felfritt. Firefox har jag inte testat.

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

## #8 — Peter S, 2005-11-21T09:10Z

Ah, ok. Det var några parseInt() som saknades. Ändra funktionen till:

```
function setZIndex(id){
  var obj = document.getElementById(id);

  obj.style.zIndex = (function(){
	  var len = arr.length,
              max = parseInt(document.getElementById(arr[0]).style.zIndex);
	  for (var i = 1; i < len; ++i){
	    var val = parseInt(document.getElementById(arr[i]).style.zIndex);
	    if (val > max){ max = val }
	  }
	  return max;
	})() + 1;
}
```

  :)

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

## #9 — robbanf, 2005-11-21T09:15Z

Ahh, men det är ju lysande! Tack så mycket för hjälpen! :)

/ Robban

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

## #10 — robbanf, 2006-10-02T19:45Z

Nu skulle jag behöva lite hjälp med att uppgradera den här koden lite. Jag vill att flera layers samtidigt ändrar z-index, alla med samma id (helst) eller olika.
Jag har flera fält som jag vill ändra samtidigt men med koden ovan lyckas jag bara ändra ett av dom.

Tacksam för hjälp!

/Robban

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

## #11 — Peter S, 2006-10-02T20:51Z

Hej!

Ett förslag kan ses nedan. Resultatet kan dock bli knepigt om två lager överlappar varandra och de ges samma värde för z-index (se exemplet).

```
<script type="text/javascript">
var arr = [
  ["layer1","layer2"],
  ["layer3","layer4"], "layer5"];

function setZIndex(id){
  var objs = getGroupById(id),
      len  = objs.length;

  for (var i = 0; i < len; ++i){
    document.getElementById(objs[i]).style.zIndex = (function(){
          var len = arr.length,
              max = parseInt(document.getElementById(typeof(arr[0]) == "object" ? arr[0][0] : arr[0]).style.zIndex);
          for (var i = 1; i < len; ++i){
            var val = parseInt(document.getElementById(typeof(arr[i]) == "object" ? arr[i][0] : arr[i]).style.zIndex);
            if (val > max){ max = val }
          }
          return max;
        })() + 1;
  }
}

function getGroupById(id){
  var l = arr.length;
  for (var i = 0; i < l; ++i){
    if (typeof(arr[i]) == "object"){
      for (var j = 0; j < arr[i].length; ++j){
        if (arr[i][j] == id) return arr[i];
      }
    } else if (arr[i] == id){
      return [arr[i]];
    }
  }
  return [];
}
</script>

<style type="text/css">

.layers{
  background-color: #eee;
  border          : 1px solid;
  height          : 90px;
  position        : absolute;
  width           : 150px;
}

</style>

<div id="layer1" class="layers" style="z-index:0; left:100px; top:100px;">Layer1</div>
<div id="layer2" class="layers" style="z-index:0; left:110px; top:110px;">Layer2</div>
<div id="layer3" class="layers" style="z-index:1; left:120px; top:120px;">Layer3</div>
<div id="layer4" class="layers" style="z-index:1; left:130px; top:130px;">Layer4</div>
<div id="layer5" class="layers" style="z-index:2; left:140px; top:140px;">Layer5</div>

<form>
  <input type="button" value="Layer1" onclick="setZIndex('layer1')">
  <input type="button" value="Layer2" onclick="setZIndex('layer2')">
  <input type="button" value="Layer3" onclick="setZIndex('layer3')">
  <input type="button" value="Layer4" onclick="setZIndex('layer4')">
  <input type="button" value="Layer5" onclick="setZIndex('layer5')">
</form>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/137949-ändra-värdet-på-z-index