Skip to content

Commit 5ebfae2

Browse files
hritik5102hritik5102
committed
CSS Position Property 🔥
1 parent e184159 commit 5ebfae2

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎13-css-position-property/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>CSS Position Property</title>
8+
</head>
9+
<body>
10+
<h2>CSS Position Property</h2>
11+
<div class="container">
12+
<div class="box-1">1</div>
13+
<div class="box-2">2</div>
14+
<div class="box-3">3</div>
15+
</div>
16+
</body>
17+
</html>

‎13-css-position-property/style.css

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2+
3+
*,
4+
:before,
5+
:after {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
font-family: "Poppins", sans-serif;
10+
}
11+
12+
body {
13+
min-height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
h2 {
21+
margin-bottom: 0.5em;
22+
}
23+
24+
.container {
25+
width: 400px;
26+
height: 400px;
27+
background-color: #f9fafb;
28+
text-align: center;
29+
line-height: 100px;
30+
border: 3px dashed black;
31+
}
32+
33+
.box-1 {
34+
width: 100px;
35+
height: 100px;
36+
background-color: #d1fae5;
37+
}
38+
39+
.box-2 {
40+
width: 100px;
41+
height: 100px;
42+
background-color: #fbcfe8;
43+
}
44+
45+
.box-3 {
46+
width: 100px;
47+
height: 100px;
48+
background-color: #dbeafe;
49+
}
50+
51+
/* Position : Relative
52+
53+
1. Offset from it's original position
54+
2. Does not removed the element from it's document flow
55+
*/
56+
57+
/* .box-1 {
58+
position: relative;
59+
top: 100px;
60+
left: 200px;
61+
} */
62+
63+
/* Position : absolute
64+
65+
1. Offset from the parent element
66+
2. Removed the element from the normal document flow
67+
3. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block i.e <html> root element
68+
*/
69+
70+
/* You can specify any of those position property (relative or absolute) to the parent element */
71+
72+
/* .container {
73+
position: relative;
74+
}
75+
76+
.box-1 {
77+
position: absolute;
78+
top: 100px;
79+
left: 200px;
80+
} */
81+
82+
/* Position: fixed
83+
84+
1. An element with position:fixed is positioned relative to the viewport
85+
2. The top, bottom, right and left properties are used to adjust the element away from the viewport
86+
3. The element is removed from the normal flow of the page
87+
*/
88+
89+
/* .box-1 {
90+
position: fixed;
91+
top: 100px;
92+
left: 100px;
93+
} */
94+
95+
/* Position : Sticky
96+
- Add a content before and after the container to make body scrollable.
97+
*/
98+
99+
.box-1,
100+
.box-2,
101+
.box-3 {
102+
position: sticky;
103+
top: 10px;
104+
}

0 commit comments

Comments
 (0)