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/*
2position: fixed;
3An element with position: fixed; is positioned relative to the viewport,
4which means it always stays in the same place even if the page is scrolled.
5The top, right, bottom, and left properties are used to position the element.
6ex; Navigation BARS
7A fixed element does not leave a gap in the page where it would normally have
8been located.
9
10Here is the CSS that is used:*/
11
12div.fixed {
13 position: fixed;
14 bottom: 0;
15 right: 0;
16 width: 300px;
17 border: 3px solid #73AD21;
18}
1/*hey guys if you have doubt how absolute property works, it works in way that
2it comes out of the 'document flow' i.e) just consider two div elements in
3which each a size of a box, say that you need two place the second box over the
4top box simple just give it absolute position such that the second div
5positioned itself with respect to the browser window, you can move the element
6anywhere in the window*/
7div{
8 position:absolute;
9 top:10px; /*it pushes away div element from top 10px down Remember with
10 browser window*/
11 left:20px;
12 right:10px;
13 bottom:20px;
14 /*last three property excatly similar to top property it just pushes away
15 from specified direction*/
16}
17Wondering how to use absolute property within a div simple?
18Say you have a div inside a div. /*most case scenario*/
19putting first div relative and mentioning second div absolute will do the job
20In my early days of css, I wonder the position property with relative and no top
21bottom, right left property with it. One day I realized it.
22/*highly recommed you to run the following code two know the difference*/
231st)<div class='b'>
24 <div class="b1">
25 content
26 </div>
27 </div>
28<style>
29.b {
30 height: 200px;
31 width: 200px;
32 display: flex;
33 justify-content: center;
34 align-items: center;
35 background-color: rgb(201, 14, 14);
36 position: relative;
37}
38
39.b1 {
40 height: 100px;
41 height: 100px;
42 width: 100px;
43 position: absolute;
44 top: 50%;
45 left: 50%;
46}
47/*do it and see*/
482nd)<div class="b1">
49content
50</div>
51<style>
52.b1 {
53 height: 100px;
54 height: 100px;
55 width: 100px;
56 position: absolute;
57 top: 50%;
58 left: 50%;
59}
601st with reference to the first div
612nd to refrence to the object window
62Wondering Why i use div for all my tags, simple due its flexibilty to be an
63comman container
64</style>
65 ---By Siddharth -a physics undergraduate.
66
1/******************* BASIC BLOCK POSITIONING **********************/
2
3/******************** Static Position *************************/
4/*All elements are static in their position by default. Which means
5that, all elements are organized just like they would if your code
6didn't have any CSS and were just pure HTML */
7
8tag_name {
9 position: static;
10}
11
12/******************** Relative Position *************************/
13/*It allow us to position this element relative to how it would have
14been positioned had it been static. You can use the coordinate
15properties to guide this element (by giving some margins to the block),
16relative to what was the standard layout. This new position will not
17influence the distribution of other elements (the others will keep
18the standard layout, as if your element leaves a "shadow" of where it
19was supposed to be). Therefore, some overlaps and lack of coordination
20can occur when you move your element*/
21
22tag_name {
23 position: relative;
24 left: 30px;
25 right: 10px;
26 bottom: 2px;
27 top: 4px;
28
29 z-index: 1; /* It decides which element will show on top of the
30 other. The first to show, is the one with the
31 greatest index */
32}
33
34/******************** Absolute Position *************************/
35/* With this property, we are able to position the element relative
36to the <body> or relative to it's parent, IF the parent is itself isn't
37"static". Using the coordination properties, we do not increase or
38decrease the margins in relation to the standard position, but rather,
39we are increasing or decreasing the distance in relation to the "walls"
40of the block that contains this element, for example, a parent <div>
41that contains a <h1> element. The name "absolut", comes from the cases
42where the parent is the <body> element. When you use this property,
43you are taking the element away from the natural flow of your document,
44so, the other elements position will not take into account your absolute
45element*/
46
47tag_name {
48 position: absolute;
49 left: 30px;
50 right: 10px;
51 bottom: 2px;
52 top: 4px;
53
54 z-index: 1; /* It decides which element will show on top of the
55 other. The first to show, is the one with the
56 greatest index */
57}
58
59/* For exemple: */
60
61div{
62 position: relative;
63}
64
65h1 {
66 position: absolute; /* In relation to the div element*/
67 left: 30px;
68 top: 4px;
69}
70
71/******************** Fixed Position *************************/
72/*As soon as the element is fixed in a certain position, relative
73to it's parent, then, whenever we scroll down the webpage, the element
74maintains its fixed position on the screen. This property will also
75make the other html elements, ignore the position of this element
76during their layout (it takes it away from the natural flow of the
77document). */
78
79tag_name {
80 position: fixed;
81 left: 30px;
82 right: 10px;
83 bottom: 2px;
84 top: 4px;
85
86 z-index: 2; /* It decides which element will show on top of the
87 other. The first to show, is the one with the
88 greatest index */
89}
90
91/******************** Sticky Position *************************/
92/* This property will stick the element to the screen when you
93reach its scroll position */
94
95tag_name {
96 position: -webkit-sticky; /* For Safari */
97 position: sticky;
98 left: 20px;
99 right: 60px;
100 bottom: 5px;
101 top: 13px;
102
103}
104
105/******************* NOTES ABOUT THE Z-INDEX **********************/
106/* By default, the z-index of an element is zero, so if you change the
107z-index to something above or below that value, you are putting that
108element above or below the ones you didn't change.
109Another important thing to be aware of is that the z-index only worked
110for elements that have a position different from the standard. This
111means that, for elements with Static position, this won't work.
112So, you can only make two elements interact in the z plane if they both
113have a define position as: Relative, Absolute, Fixed, ... */
114
115tag_name_1 {
116 position: absolute;
117 z-index: -1;
118
119}
120
121tag_name_2 {
122 position: relative; /* tag_name_1 will be below the tag_name_2 */
123}
124