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>
Works in FF. I think there is some problem in IE. But fixable!
ReplyDeleteUsers connect with a vendor with a reside digital camera in front 1xbet of them. They can then work together with the vendor and other players on the table. If you would instead favor to give attention to} the table, for instance, find a way to|you possibly can} change the digital camera whenever you want to. The dealers are additionally responsive and will usually work together instantly with players, giving an authentic on line casino experience.
ReplyDelete