CSS ZIndex sample demo

CSS Z-Index

The z-index property specifies the stack order of an element. The highest stack ordered element is visible in the screen.
z-index works only on abosolute,relative and fixed positioned elements.

 

To specify the z-index of an element using css

div { z-index: 1}

Using javascript

object.style.zIndex = 1;

Sample to explain zIndex behavior. Copy paste the code, save as html and run it to see the behavior. Its self explanatory.


<HTML>
<HEAD>
<TITLE>Z-index demo </TITLE>

<script>
 var array = new Array("a","b","c","d","e");
 var id;
 function dance(){

 id = self.setInterval(function(){
     changeIndex();
    }, 200);
 }
      

  function changeIndex(){ 
  var index = Math.floor(Math.random()*5); 
 
  var obj = $(array[index]);

   obj.style.zIndex = obj.style.zIndex == 10 ? -1 : 10;
   }
 
 function stop(){
  window.clearInterval(id);
 }

 function bringToFront(e){
  for(a in array){
   $(array[a]).style.zIndex = 0;
  }
  $(e).style.zIndex = 10;
 }
 function $(k){
  return document.getElementById(k);
 }

   

</script>
</HEAD>

<BODY>
  <div style="height:30"><p style="color:#FF3300;">A small example to show the behavior of zIndex property. Self explainable code.<p></div>
  <div style="height:200px">
  <div style="width:200px; border: solid 1px; height:200px; float:left">
 <div id="a" style="width: 200px; height: 200px; border: solid 1px #FFFFFF; background: #ddd;z-index:4;position:relative;">
  <p style="padding-left: 30px; padding-top: 60px;">Grey Box</p>
 </div>
 <div id="b" style="width: 200px; height: 200px; border: solid 1px #FFFFFF; background: #3366FF; margin-top: -201px; z-index:3;position:relative;">
  <p style="padding-left: 30px; padding-top: 60px;">Blue Box</p>
 </div>
 <div id="c" style="width: 200px; height: 200px; border: solid 1px #FFFFFF; background:#33FF00; margin-top:-201px;z-index:2;position:relative;" >
  <P style="padding-left:30px; padding-top:60px;">Green Box</P>
 </div>
 <div id="d" style="width: 200px; height: 200px; border: solid 1px #FFFFFF; background:#FFFF00; margin-top:-201px;z-index:1;position:relative;" >
  <P style="padding-left:30px; padding-top:60px;">Yellow Box</P>
 </div>
 <div id="e" style="width: 200px; height: 200px; border: solid 1px #FFFFFF; background:#FF3300; margin-top:-201px;z-index:0;position:relative;" >
  <P style="padding-left:30px; padding-top:60px;">Red Box</P>
 </div> 
</div>
<div style="float:left;margin:10 0 0 50;">
 <div><input type="button" value="RED" onclick="bringToFront('e');"  style="background:#FF3300;width:100"></input></div>
 <div><input type="button" value="YELLOW" onclick="bringToFront('d');"  style="background:#FFFF00;width:100"></input></div>
 <div><input type="button" value="GREEN" onclick="bringToFront('c');"  style="background:#33FF00;width:100"></input></div>
 <div><input type="button" value="BLUE" onclick="bringToFront('b');"  style="background:#3366FF;width:100"></input></div>
 <div><input type="button" value="GREY" onclick="bringToFront('a');"  style="background:#ddd;width:100"></input></div>
</div>
</div>

<div style="position:relative;margin-top:50px">
 <input type="button" value="Click me to dance" onclick="dance();" width=200></input>
 <input type="button" value="Stop" onclick="stop();" width=200></input>
</div>
</BODY>
</HTML>

Comments

  1. Works in FF. I think there is some problem in IE. But fixable!

    ReplyDelete

Post a Comment

Popular posts from this blog

SVN File Creation Date

Java NIO2 - Watching a directory for changes. FileWatcherService.

Ubuntu / kubuntu - Laptop key board cursor jumping issue