├── 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 |
33 |

Hello, World!

34 |
35 |
36 |

Hello, World!

37 |
38 |
39 |

Hello, World!

40 |
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 | --------------------------------------------------------------------------------