<html>
<head>
<style type="text/css">
body {
background: #112233;
}
div#foobar {
height: 20px;
width: 100px;
margin: 10px;
border: 3px solid #221133;
background: #332211;
}
div#position-test {
position: relative;
background: red;
right: -50px;
top: 50px;
width: 50px;
height: 50px;
}
div#strictly-above {
margin-bottom: 10px;
position: absolute;
bottom: 50px;
height: 50px;
width: 50px;
background: green;
}
div#strictly-below {
margin-top: 10px;
position: absolute;
top: 50px;
height: 50px;
width: 50px;
background: green;
}
div#strictly-left {
margin-right: 10px;
position: absolute;
right: 50px;
height: 50px;
width: 50px;
background: green;
}
div#strictly-right {
margin-left: 10px;
position: absolute;
left: 50px;
height: 50px;
width: 50px;
background: green;
}
div#within {
margin: 5px;
position: absolute;
left: 5px;
top: 5px;
height: 30px;
width: 30px;
background: yellow;
}
</style>
</head>
<body>
<script>
localStorage.setItem("testItem", `{"value": 300}`);
localStorage.setItem("translationHash", `cb2a8ce9`);
</script>
<div>
<div id="foobar"></div>
</div>
<div id="position-test">
<div id="within"></div>
<div id="strictly-above"></div>
<div id="strictly-below"></div>
<div id="strictly-left"></div>
<div id="strictly-right"></div>
</div>
</body>
</html>