├── README.md
├── absolute
├── absolute.css
└── index.html
├── base.css
├── fixed&sticky
├── fixed.css
└── index.html
├── index.html
└── static&relative
├── index.html
└── relative.css
/README.md:
--------------------------------------------------------------------------------
1 | # Learn-CSS-Positioning-Quickly-With-A-Real-World-Example
2 |
--------------------------------------------------------------------------------
/absolute/absolute.css:
--------------------------------------------------------------------------------
1 | body {
2 | overflow-x: hidden;
3 | }
4 |
5 | .container {
6 | position: relative;
7 | }
8 |
9 | .item-1 {
10 | position: absolute;
11 | top: -50px;
12 | right: -50px;
13 | /* bottom: 0px; */
14 | /* left: 0px; */
15 | z-index: -1;
16 | }
17 |
--------------------------------------------------------------------------------
/absolute/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 | Positions
14 |
15 |
16 |
17 |
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
6
24 |
7
25 |
8
26 |
9
27 |
10
28 |
11
29 |
12
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/base.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | --clr-dark: #070a12;
9 | --clr-light: #f1f5f9;
10 | --clr-accent: #e11d48;
11 | --clr-lightRose: #fb7185;
12 | --clr-green: #4ade80;
13 | --clr-sky: #38bdf8;
14 | --clr-pink: #f472b6;
15 | --clr-violet: #a78bfa;
16 | --clr-yellow: #facc15;
17 | }
18 |
19 | body {
20 | margin: 0;
21 | padding: 0;
22 | line-height: 1.6;
23 | word-spacing: 1.4px;
24 | font-family: 'Roboto', sans-serif;
25 | background-color: var(--clr-light);
26 | color: var(--clr-dark);
27 | }
28 |
29 | .sticky {
30 | width: 100px;
31 | height: 100px;
32 | background-color: var(--clr-lightRose);
33 | position: fixed;
34 | bottom: 0px;
35 | }
36 |
37 | h1 {
38 | font-size: 3rem;
39 | }
40 |
41 | section {
42 | height: 100vh;
43 | display: flex;
44 | justify-content: center;
45 | align-items: center;
46 | }
47 |
48 | .container {
49 | display: grid;
50 | grid-template-rows: repeat(3, 150px);
51 | grid-template-columns: repeat(4, 150px);
52 | grid-gap: 1em;
53 | }
54 |
55 | .item {
56 | width: 150px;
57 | height: 150px;
58 | display: flex;
59 | justify-content: center;
60 | align-items: center;
61 | border-radius: 10px;
62 | color: var(--clr-light);
63 | font-weight: 700;
64 | font-size: 1.25rem;
65 | }
66 |
67 | .item-1 {
68 | background-color: var(--clr-lightRose);
69 | }
70 |
71 | .item-2 {
72 | background-color: var(--clr-sky);
73 | }
74 |
75 | .item-3 {
76 | background-color: var(--clr-yellow);
77 | }
78 |
79 | .item-4 {
80 | background-color: var(--clr-green);
81 | }
82 |
83 | .item-5 {
84 | background-color: var(--clr-violet);
85 | }
86 |
87 | .item-6 {
88 | background-color: var(--clr-pink);
89 | }
90 |
91 | .item-7 {
92 | background-color: var(--clr-lightRose);
93 | }
94 |
95 | .item-8 {
96 | background-color: var(--clr-sky);
97 | }
98 |
99 | .item-9 {
100 | background-color: var(--clr-green);
101 | }
102 |
103 | .item-10 {
104 | background-color: var(--clr-yellow);
105 | }
106 |
107 | .item-11 {
108 | background-color: var(--clr-violet);
109 | }
110 |
111 | .item-12 {
112 | background-color: var(--clr-pink);
113 | }
114 |
--------------------------------------------------------------------------------
/fixed&sticky/fixed.css:
--------------------------------------------------------------------------------
1 | .item-1 {
2 | position: fixed;
3 | bottom: 0px;
4 | left: 0px;
5 | border-radius: 0;
6 | width: 100%;
7 | z-index: 1;
8 | }
9 |
10 | .item-5 {
11 | position: sticky;
12 | top: 50px;
13 | }
14 |
--------------------------------------------------------------------------------
/fixed&sticky/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 | Positions
14 |
15 |
16 |
17 |
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
6
24 |
7
25 |
8
26 |
9
27 |
10
28 |
11
29 |
12
30 |
31 |
32 |
35 |
38 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 | Positions
13 |
14 |
15 |
16 |
17 |
1
18 |
2
19 |
3
20 |
4
21 |
5
22 |
6
23 |
7
24 |
8
25 |
9
26 |
10
27 |
11
28 |
12
29 |
30 |
31 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/static&relative/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 | Positions
14 |
15 |
16 |
17 |
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
6
24 |
7
25 |
8
26 |
9
27 |
10
28 |
11
29 |
12
30 |
31 |
32 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/static&relative/relative.css:
--------------------------------------------------------------------------------
1 | .item-1 {
2 | position: relative;
3 | top: 100px;
4 | left: 100px;
5 | }
6 |
--------------------------------------------------------------------------------