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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Absolute positioning test</title>
<style type="text/css">
.abs { position: absolute; margin: 0; width: 200px; height: 200px;
border: solid 1px green; }
</style>
</head>
<body>
<h1>Absolute positioning test</h1>
<div style="position: relative; margin: 50px; height: 800px;
border: solid 2px red">
<p class="abs">Nullam fermentum. In vestibulum, turpis non bibendum congue, mi
est dapibus mi, et pellentesque tellus quam et dolor. Phasellus a neque ut odio
rutrum aliquet. In hac habitasse platea dictumst. Nam sagittis iaculis justo.
Suspendisse lectus eros.</p>
<p class="abs" style="left: 250px">Suspendisse suscipit, dui vitae dapibus
molestie, pede turpis facilisis sem, sit amet dignissim arcu wisi vitae ligula.
Maecenas ac ipsum. Nullam euismod scelerisque erat. Proin massa augue, sagittis
eu, cursus vel, dapibus a.</p>
<p class="abs" style="right: 50px">Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Nulla bibendum massa a
magna. Etiam vestibulum. Etiam pulvinar purus eu tellus. Curabitur mattis
volutpat purus. In aliquam, sem in cursus elementum.</p>
<p class="abs" style="top: 250px">Nam fringilla felis vel ligula. Aliquam
gravida sapien a felis. Cras malesuada. Aenean vehicula placerat odio.
Suspendisse potenti. Nulla at ligula. Cras tempor, tellus vel adipiscing
pharetra, lectus lacus porttitor lorem.</p>
<p class="abs" style="bottom: 50px">Proin iaculis pharetra risus. In vitae
sapien. Fusce ligula lorem, dapibus ac, consectetuer ut, pharetra ac, tortor.
Aliquam mi urna, faucibus semper, lacinia in, volutpat sit amet, urna. Vivamus
egestas lectus vel metus.</p>
<p class="abs" style="left: 300px; top: 300px">Vestibulum justo. Vivamus sem
purus, placerat eu, ultrices vitae, tincidunt id, ante. Duis tincidunt. Etiam
felis sem, cursus et, mattis in, cursus nec, erat. Pellentesque sapien mauris,
aliquet non, imperdiet sed, laoreet id, dolor. Fusce ac tellus.</p>
</div>
<h2>Static positions</h2>
<div style="position: relative; margin: 50px; border: solid 2px red">
<p>Sed mollis. Donec dolor. Aenean non libero. Etiam hendrerit sollicitudin turpis. Duis vestibulum vestibulum ligula. Nunc eu nulla. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque
fringilla vulputate velit. Fusce tristique aliquam justo. Sed quis lacus. Fusce
ac magna semper tellus molestie bibendum. Aliquam sit amet metus. Phasellus quis
massa vel nibh vehicula tristique.</p>
<p>Nam malesuada, ante vel iaculis suscipit, ante mauris accumsan massa, semper
suscipit metus urna sed eros. Donec dolor. Sed est metus, dapibus sed, mattis
ac, vehicula non, urna. Mauris gravida. In feugiat. Ut vulputate. Ut sapien.
Proin convallis consectetuer turpis.</p>
<p class="abs">Fusce vel neque eget wisi mattis iaculis. Duis ligula. Sed semper
erat ut urna. Aliquam tempor eleifend quam.</p>
<p>Proin consectetuer, dui at bibendum accumsan, libero dui fermentum orci,
semper viverra augue neque sit amet dui. Cras nunc. Nullam vel odio. Donec
scelerisque auctor massa. Maecenas eu quam in ipsum dapibus euismod.</p>
<p>Nam id lacus. Maecenas quam lectus, malesuada ac, pretium ut, imperdiet a,
odio. Phasellus euismod rhoncus massa. Pellentesque semper lacus vel est
imperdiet lacinia. <span class="abs">Cras adipiscing consectetuer enim.
Vestibulum lectus.</span> Aenean pretium mattis mauris. Sed cursus, urna quis
aliquam congue, elit mi elementum diam, nec tempus odio lectus vitae mi. Quisque
sed ipsum. Pellentesque porttitor nunc eu nibh. Nunc nisl. Pellentesque sit amet
eros.</p>
</div>
<h2>Not children of containing block</h2>
<div style="position: relative; margin: 50px; border: solid 2px red">
<p>Sed mollis. Donec dolor. Aenean non libero. Etiam hendrerit sollicitudin turpis. Duis vestibulum vestibulum ligula. Nunc eu nulla. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque
fringilla vulputate velit. Fusce tristique aliquam justo. Sed quis lacus. Fusce
ac magna semper tellus molestie bibendum. Aliquam sit amet metus. Phasellus quis
massa vel nibh vehicula tristique.</p>
<div>
<p>Nam malesuada, ante vel iaculis suscipit, ante mauris accumsan massa, semper
suscipit metus urna sed eros. Donec dolor. Sed est metus, dapibus sed, mattis
ac, vehicula non, urna. Mauris gravida. In feugiat. Ut vulputate. Ut sapien.
Proin convallis consectetuer turpis.</p>
<p class="abs" style="top: 20px">Proin consectetuer, dui at bibendum accumsan,
libero dui fermentum orci, semper viverra augue neque sit amet dui. Cras nunc.
Nullam vel odio. Donec scelerisque auctor massa. Maecenas eu quam in ipsum
dapibus euismod.</p>
<p>Nam id lacus. Maecenas quam lectus, malesuada ac, pretium ut, imperdiet a,
odio. Phasellus euismod rhoncus massa. Pellentesque semper lacus vel est
imperdiet lacinia. Cras adipiscing consectetuer enim. Vestibulum lectus. Aenean
pretium mattis mauris. Sed cursus, urna quis aliquam congue, elit mi elementum
diam, nec tempus odio lectus vitae mi. Quisque sed ipsum. Pellentesque porttitor
nunc eu nibh. Nunc nisl. Pellentesque sit amet eros.</p>
</div>
</div>
</body>
</html>
|
