locked
setting zindex programmatically RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    hello

    I am trying to set the zindex of a tag programmatically but i dont see any change

         
     function MoveZIndexDown() {
            if (LastTagSelected == null){ return; }
            var index = LastTagSelected.style.zindex
            if (isNaN(index)){ index = 0; }
          LastTagSelected.style.zindex = index-1
           
        }
    the index zindex change but the tag does not move on the back
              


    Monday, April 30, 2012 4:10 PM

Answers

  • Question
    Sign in to vote
    1
    Sign in to vote

    When using the z-index attribute as a property in script, please remember to capitalize the "I" as in "zIndex"
    Also ensure that the objects whose zIndex you are trying to change have been positioned absolutely. In the example below please note the use of "position:relative" which makes the "divRel" bounding box the starting point for the left, right. top and bottom attributes of the absolutely positioned child elements. (In the images below, the styling of the buttons at the bottom has been modified by my Windowblinds skin.)

             

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body {width:100%;background:#999;color:#000;text-align:left;margin:0;padding:20px;font:bold 14px/18px Arial;}
#divRel {width:300px;height:300px;margin:0 auto;background:#777;position:relative;}
#box1, #box2 {width:240px;height:240px;position:absolute;text-align:center;}
#box1 {left:20px;top:20px;background-color:#ff0;z-index:2;}
#box2 {right:20px;bottom:20px;background-color:#0f0;z-index:1;}
#inputBar {width:300px;margin:10px auto 0;text-align:center;}
input {width:140px;}
p {margin-top:110px;}
-->
</style>
<script type="text/javascript">
function fx(){
document.getElementById("yOnTop").onclick=function(){document.getElementById("box2").style.zIndex=1;};
document.getElementById("gOnTop").onclick=function(){document.getElementById("box2").style.zIndex=3;};
}
</script>
</head>
<body onload="fx()">
<div id="divRel">
<div id="box1"><p>Yellow div is on top</p></div>
<div id="box2"><p>Green div is on top</p></div>
</div>
<div id="inputBar">
<input type="button" id="yOnTop" value="Yellow" title="Make the yellow div topmost"/>
<input type="button" id="gOnTop" value="Green" title="Make the green div topmost"/>
</div>
</body>
</html>



    • Edited by mystifeid Monday, April 30, 2012 11:14 PM
    • Marked as answer by marck68 Tuesday, May 1, 2012 6:22 AM
    Monday, April 30, 2012 10:23 PM