csstdg5figs/10-floating-and-positioning/offset-props-outside-containing-block.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Positioning an element outside its containing block</title>
<style type="text/css">
div {color: rgba(0,0,0,0.5); font: bold italic x-large sans-serif; text-align: center;}
#contain {position: relative; background: rgba(0,128,216,0.33);
  height: 300px; width: 500px;}
#example {position: absolute; background: rgba(216,128,0,0.67);
  top: 50%; bottom: -2em; left: 75%; right: -7em;}
</style>
</head>
<body>

<div id="contain">
containing block
<div id="example">positioned element</div>
</div>

</body>
</html>