<! 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"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> three layers overlap. Click to switch </title> <Script type = "text/javascript"> Function $ (obj ){ Return document. getElementById (obj ); } Function change (n ){ For (var I = 1; I <4; I ++ ){ If (n = I ){ $ ("A" + I). style. zIndex = "100 "; } Else { $ ("A" + I). style. zIndex = "0 "; } } } </Script> </Head> <Body> <Div id = "a1" Style = "position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; Background-color: # ddeeff; z-index: 1 "onclick =" change ('1') "> </Div> <Div id = "a2" Style = "position: absolute; left: 150px; top: 130px; width: 100px; height: 100px; Background-color: # eeffdd; z-index: 2 "onclick =" change ('2') "> </Div> <Div id = "a3" Style = "position: absolute; left: 200px; top: 160px; width: 100px; height: 100px; Background-color: # ffddee; z-index: 3 "onclick =" change ('3') "> </Div> <Div> http://www.jb51.net/</div> </Body> </Html> |