2017-04-24 16:15:39 +00:00
|
|
|
<!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 );
|
2017-04-25 02:59:18 +00:00
|
|
|
setTimeout( startIframeTest, 13 );
|
2017-04-24 16:15:39 +00:00
|
|
|
} );
|
|
|
|
|
</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>
|
