Home/ Questions/Q 6800135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:55:56+00:00

I have the following code for stacking of elements and on putting the cursor

  • 0

I have the following code for stacking of elements and on putting the cursor over an elemnt that element comes to the top.
Here is the code.. It is not working for some reason. The paragraphs are displayed, but on moving the mouse over them nothing happens.

<html>
<head>
<title>Stacking</title>
</script>
<style type="text/css">
.layer1Style
{
position: absolute;
top:50pt;
left:50pt;
background-color:red;
z-index:0;
}
.layer2Style
{
position: absolute;
top:75pt;
left:75pt;
background-color:green;
z-index:0;
}
.layer3Style
{
position: absolute;
top:100pt;
left:100pt;
background-color:blue;
z-index:10;
}
</style>

<script type="text/javascript">
var top="layer3";

function mover(newTop)
{
var oldTopStyle=document.getElementById(top).style;
var newTopStyle=document.getElementById(newTop).style;
oldTopStyle.z-index="0";
newTopStyle.z-index="10";
top=document.getElementById(top).id;
}
</script>
</head>

<body>
<div class="layer1Style" id="layer1" onmouseover="mover('layer1')">
<p>This is my first paragraph</p>
</div>
<div class="layer2Style" id="layer2" onmouseover="mover('layer2')">
<p>This is my second paragraph</p>
</div>
<div class="layer3Style" id="layer3" onmouseover="mover('layer3')">
<p>This is my third paragraph</p>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You cannot use z-index in JavaScript, because it’s interpreted as z minus index. Use zIndex instead.

    function mover(newTop)
{
    var oldTopStyle = document.getElementById(top).style;
    var newTopStyle = document.getElementById(newTop).style;
    oldTopStyle.zIndex = "0";  // "zIndex", not "z-index"
    newTopStyle.zIndex = "10"; // "zIndex", not "z-index"
    top = document.getElementById(top).id;
}

    (and also note that you cannot use top as a global variable, because it is already declared as a readonly property, window.top)

    • 0