1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="documentElement" class="box">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="horizontal values 2^N; vertical doubled">
<title>Nonempty margin/border/padding/position</title>
<style type="text/css" media="screen">
/* work with convenient classes, units, and dimensions */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.box {
font-size: 4px;
border-style: solid;
min-width: 300px;
}
/* start the exponential scales, reserving the first bit for scroll position */
.box {
border-width: 1em 0.5em;
top: 2em; left: 1em;
margin: 4em 2em;
padding: 8em 4em;
}
#documentElement {
margin: 16em 8em;
border-width: 32em 16em;
padding: 64em 32em;
}
#body {
margin: 128em 64em;
border-width: 256em 128em;
padding: 512em 256em;
}
#documentElement {
top: 1024em; left: 512em;
}
#body {
top: 2048em; left: 1024em;
}
/* style for humans */
:not(.box) {
font-size: 20px;
}
html {
border-color: hsl(20, 100%, 70%);
background-color: hsl(110, 100%, 70%);
}
body {
border-color: hsl(200, 100%, 70%);
background-color: hsl(290, 100%, 70%);
}
html::after,
body::after {
font: italic 16px sans-serif;
content: attr(id);
}
div.box {
background-color: hsla(0, 0%, 70%, 0.5);
opacity: 0.7;
}
div.box div.box {
background-color: hsla(60, 100%, 70%, 0.5);
}
</style>
<script src="../../jquery.js"></script>
<script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery( function() {
window.scrollTo( 1, 2 );
setTimeout( startIframeTest, 13 );
} );
</script>
</head>
<body id="body" class="box">
<div id="relative" class="relative box">
<div id="relative-relative" class="relative box"><code
>relative > relative</code></div>
<div id="relative-absolute" class="absolute box"><code
>relative > absolute</code></div>
</div>
<div id="absolute" class="absolute box">
<div id="absolute-relative" class="relative box"><code
>absolute > relative</code></div>
<div id="absolute-absolute" class="absolute box"><code
>absolute > absolute</code></div>
</div>
<div id="fixed" class="fixed box">
<div id="fixed-relative" class="relative box"><code
>fixed > relative</code></div>
<div id="fixed-absolute" class="absolute box"><code
>fixed > absolute</code></div>
</div>
<p id="positionTest" class="absolute">position:absolute with no top/left values</p>
</body>
</html>
|
