Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

148 lines (124 sloc) 3.864 kB
<!DOCTYPE html>
<html>
<head>
<title>Tests for z-index</title>
<style type="text/css">
html { -pie-load-path: "../build"; }
html {
margin: 0;
padding: 0;
}
body {
background: url(background2.gif);
padding: 20px 50% 20px 0;
}
.test {
behavior: url(../build/PIE.htc);
padding: 20px;
margin: 0 20px 20px;
background: #EEE;
-moz-border-radius: 1em;
border-radius: 1em;
-moz-box-shadow: 0 0 10px;
box-shadow: 0 0 10px;
white-space: nowrap;
}
.wrapper {
padding: 20px 0;
margin: 0 20px 20px;
background: url(background1.gif);
border: 1px solid;
}
.clearer {
clear: both;
}
#test1 {
position: static;
}
#test2 {
position: relative;
}
#test3 {
position: absolute;
top: 20px;
right: 0;
}
#test4 {
position: static;
float: left;
}
#test5 {
position: relative;
float: left;
clear: left;
}
#test6 {
position: static;
z-index: 1;
}
#test7 {
position: relative;
z-index: 1;
}
#test8 {
position: absolute;
top: 100px;
right: 0;
z-index: 1;
}
#test9 {
position: static;
}
#test10 {
position: relative;
}
#test11 {
position: absolute;
top: 180px;
right: 0;
}
#test9 {
position: static;
zoom: 1;
}
#test13 {
position: static;
z-index: 1;
}
#test14 {
position: relative;
z-index: 1;
}
#test15 {
position: absolute;
top: 320px;
right: 0;
z-index: 1;
}
#test16 {
position: static;
z-index: 1;
zoom: 1;
}
</style>
</head>
<body>
<div class="test" id="test1">position:static, no z-index</div>
<div class="test" id="test2">position:relative, no z-index</div>
<div class="test" id="test3">position:absolute, no z-index</div>
<div class="test" id="test4">float:left, position:static, no z-index</div>
<div class="test" id="test5">float:left, position:relative, no z-index</div>
<div class="clearer"></div>
<div class="test" id="test6">position: static, z-index: 1</div>
<div class="test" id="test7">position: relative, z-index: 1</div>
<div class="test" id="test8">position: absolute, z-index: 1</div>
<div id="test9" class="wrapper"><div class="test">Nested within position: static, no z-index</div></div>
<div id="test10" class="wrapper"><div class="test">Nested within position: relative, no z-index</div></div>
<div id="test11" class="wrapper"><div class="test">Nested within position: absolute, no z-index</div></div>
<div id="test12" class="wrapper"><div class="test">Nested within position: static, no z-index, hasLayout</div></div>
<div id="test13" class="wrapper"><div class="test">Nested within position: static, z-index: 1</div></div>
<div id="test14" class="wrapper"><div class="test">Nested within position: relative, z-index: 1</div></div>
<div id="test15" class="wrapper"><div class="test">Nested within position: absolute, z-index: 1</div></div>
<div id="test16" class="wrapper"><div class="test">Nested within position: static, z-index: 1, hasLayout</div></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.