1<img src="image.jpg" style="top:---%; left:---%">
2
3<!-- if you put "top" to an higher %, the image will be
4 more down. exemple :-->
5
6<img src="romuald.png" style="top:03%; left:80%">
7
8<!-- my image will be up and in the right corner -->
1<!-- There are five different position values: static, relative, fixed,
2 absolute and sticky -->
3
4<!-- static -->
5<head>
6<style>
7div.static {
8 position: static;
9}
10</style>
11</head>
12<body>
13
14<div class="static">
15 This div element is static.
16</div>
17
18</body>
19
20<!-- relative -->
21<head>
22<style>
23div.relative {
24 position: relative;
25 left: 30px;
26}
27</style>
28</head>
29<body>
30
31<div class="relative">
32This div element is relative.
33</div>
34
35</body>
36
37<!-- fixed -->
38<head>
39<style>
40div.fixed {
41 position: fixed;
42 bottom: 0;
43 right: 0;
44 width: 300px;
45}
46</style>
47</head>
48<body>
49
50<div class="fixed">
51This div element is fixed.
52</div>
53
54</body>
55
56<!-- absolute -->
57<head>
58<style>
59div.relative {
60 position: relative;
61 width: 400px;
62 height: 200px;
63}
64
65div.absolute {
66 position: absolute;
67 top: 80px;
68 right: 0;
69 width: 200px;
70 height: 100px;
71}
72</style>
73</head>
74<body>
75
76<div class="relative">This div element has position: relative;
77 <div class="absolute">This div element has position: absolute;</div>
78</div>
79
80</body>
81
82// sticky
83<head>
84<style>
85div.sticky {
86 position: -webkit-sticky;
87 position: sticky;
88 top: 0;
89 padding: 5px;
90 background-color: #cae8ca;
91 border: 2px solid #4CAF50;
92}
93</style>
94</head>
95<body>
96
97<div class="sticky">I am sticky!</div>
98
99<div style="padding-bottom:2000px">
100 <p>The sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
101</div>
102
103</body>