1The types of positioning in CSS are-
21)static: this is the default value.
32)sticky: the element is positioned based on the user's scroll position.
43)fixed: the element is positioned related to the browser window.
54)relative: the element is positioned relative to its normal position.
65)absolute: the element is positioned absolutely to its first positioned parent.
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset=utf-8 />
5<title>Test</title>
6<style>
7 #foo {
8 position: fixed;
9 bottom: 0;
10 right: 0;
11 }
12</style>
13</head>
14<body>
15 <div id="foo">Hello World</div>
16</body>
17</html>
1The types of positioning in CSS are-
21)static: this is the default value.
32)sticky: the element is positioned based on the user's scroll position.
43)fixed: the element is positioned related to the browser window.
54)relative: the element is positioned relative to its normal position.
65)absolute: the element is positioned absolutely to its first positioned parent.
7
8Example:
9
10.message-box {
11 position: relative;
12 background-color: #333;
13 color: white;
14 border-radius: 5px;
15}
1h2.pos_left {
2 position: relative;
3 left: -20px;
4}
5
6h2.pos_right {
7 position: relative;
8 left: 20px;
9}
1<!DOCKTYPE html> <!-- Start of coding page -->
2<html> <!-- Start of html coding -->
3 <head> <!-- Start of head -->
4 <title>TITLE<title> <!-- Title -->
5 <script>
6 //JavaScript
7 </script>
8 <style>
9 /* CSS */
10 </style>
11 </head> <!-- End of head -->
12 <body> <!-- Start of body -->
13 <div id='mydiv' style = "position:relative; left:0px; top:100px;">
14 Hello!
15 <!-- Use that style tag to positions things, have a play around with it! -->
16 </div>
17 </body> <!-- End of body -->
18<html> <!-- End of html coding -->
19<!-- Add this line of code next to your id:
20
21style = "position:relative; left:0px; top:100px;"
22
23too let you position divs where you want them, you can even position
24them ontop of other divs! -->