-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut21.html
91 lines (69 loc) · 2.57 KB
/
tut21.html
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
<!-- /* Types Of Position Property :
There are five types of position property :
static
relative
absolute
fixed
sticky
position: static;
It is the default position of HTML elements.
position: relative;
It is used when we need to position an HTML element relative to its normal position.
We can set the top, right, bottom, and left properties that will cause the element to
adjust away from the normal position.
position: absolute;
An element with the absolute position will move according to the position of its parent element.
position: fixed;
An element with position:fixed; will remain stuck to a specific position even after the page is scrolled.
This position property is used when we want to keep an HTML element at a fixed spot no matter where on the page the user is.
position: sticky;
It is a hybrid of relative and fixed position.
An HTML element with position:sticky; will just sit there until a given position offset is met.
*/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
border: 2px solid black;
background-color: khaki;
height: 3444px;
}
/* CSS Position: static (default), relative, absolute, fixed, sticky */
.box {
display: inline-block;
border: 2px solid red;
width: 150px;
height: 150px;
margin: 2px;
}
#box3 {
/* relative: Positions the element relative to its normal positon and will leave a gap at its normal position*/
/* position: relative; */
/* absolute: Positions the element relative to the positon of its first parent*/
/* position: absolute; */
/* top: 34px;
left: 134px; */
/* fixed: Positions the element relative to the browser window; */
/* position: fixed;
right: 4px;
bottom: 2px */
/* sticky: Positions the element relative to the users scroll position */
position: sticky;
top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">Chat with us</div>
<div class="box" id="box4">4</div>
</div>
</body>
</html>