<style type= "Text/css" >
#d1 {
Position:absolute;
width:300px;
height:300px;
Visibility:hidden;
Color: #fff;
Background: #555;
}
#d2 {
Position:absolute;
width:300px;
height:300px;
Visibility:hidden;
Color: #fff;
Background: #777;
}
#d3 {
Position:absolute;
width:150px;
height:150px;
Visibility:hidden;
Color: #fff;
Background: #999;
}
</style>
<script>
var d1, D2, D3, W, H;
Window.onload = function () {
D1 = document.getElementById (' D1 ');
D2 = document.getElementById (' D2 ');
D3 = document.getElementById (' D3 ');
Back ();
W = window.innerwidth;
h = window.innerheight;
Resizecheck ();
}
function Resizecheck () {
if (w!= window.innerwidth | | h!= window.innerheight) {
Location.replace (LOCATION.HREF);
Return
}
SetTimeout ("Resizecheck ()", 1000);
}
function back () {
Divmoveto (d1,200,50);
Divmoveto (d2,250,75);
Divmoveto (d3,75,75);
Divzindex (d1,1);
Divzindex (d2,2);
Divzindex (d3,3);
Divbgcolor (d1, ' #555 ');
Divbgcolor (D2, ' #777 ');
Divbgcolor (D3, ' #999 ');
Divtxtcolor (d1, ' #fff ');
Divtxtcolor (D2, ' #fff ');
Divtxtcolor (D3, ' #fff ');
Divshow (D1);
Divshow (D2);
Divshow (D3);
}
function color () {
Divbgcolor (d1, ' #f02d2d ');
Divbgcolor (D2, ' #f040d1 ');
Divbgcolor (D3, ' #55afe0 ');
Divtxtcolor (d1, ' #fff ');
Divtxtcolor (D2, ' #fff ');
Divtxtcolor (D3, ' #fff ');
}
function Divmoveto (d, x, y) {
D.style.pixelleft = x;
D.style.pixeltop = y;
}
function Divmoveby (d, DX, dy) {
D.style.pixelleft = + dx;
D.style.pixeltop + dy;
}
function Divshow (d) {
d.style.visibility = ' visible ';
}
function Divhide (d) {
d.style.visibility = ' hidden ';
}
function Divsizeto (d, W, h) {
D.style.pixelwidth = W;
D.style.pixelheight = h;
}
function Divsizeby (d, DW, DH) {
D.style.pixelwidth + = DW;
D.style.pixelheight + + dh;
}
function Divzindex (d, z) {
D.style.zindex = Z;
}
function Divbgcolor (d, c) {
D.style.background = C;
}
function Divtxtcolor (d, c) {
D.style.color = C;
}
</script>
<body id= "Bodyid" >
<form name= "Form1" >
<p>
<input type= "button" value= "Mobile D2" onclick= "Divmoveby (d2,10,10)" ><br>
<input type= "button" value= "mobile D3 to D2 (0,0)" onclick= "Divmoveto (d3,0,0)" ><br>
<input type= "button" value= "mobile D3 to D2 (75,75)" onclick= "Divmoveto (d3,75,75)" ><br>
</p>
<p>
<input type= "button" value= "Magnify D1" onclick= "Divsizeby (d1,15,15)" ><br>
<input type= "button" value= "Shrink D1" onclick= "Divsizeby (d1,-15,-15)" ><br>
</p>
<p>
<input type= "button" value= "Hide D2" onclick= "Divhide (D2)" ><br>
<input type= "button" value= "Display D2" onclick= "Divshow (D2)" ><br>
</p>
<p>
<input type= "button" value= "Priority display D1" onclick= "Divzindex (d1,2);d Ivzindex (d2,1)" ><br>
<input type= "button" value= "Priority display D2" onclick= "Divzindex (d1,1);d Ivzindex (d2,2)" ><br>
</p>
<p>
<input type= "button" value= "Fill Color" onclick= "color ()" ><br>
</p>
<p>
<input type= "button" value= "Return to default status" onclick= "Back ()" ><br>
</p>
</form>
<div id= "D1" >
<b>d1</b>
</div>
<div id= "D2" >
<b>d2</b><br><br>
D2 contains D3
<div id= "D3" >
<b>d3</b><br><br>
D3 is the D2 of the child layer
</div>
</div>
</body>
