├── README.md
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # css-positioning
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Styles for the header */
2 |
3 | header {
4 | background-color: blue;
5 | color: white;
6 | padding: 20px;
7 | }
8 |
9 | header h1 {
10 | margin: 0;
11 | font-size: 40px;
12 | }
13 |
14 | /* Styles for the main content */
15 | main {
16 | display: flex;
17 | flex-wrap: wrap;
18 | justify-content: space-around;
19 | margin: 0 50%;
20 | margin-bottom: 1000px;
21 | }
22 |
23 | .button-group {
24 | display: flex;
25 | justify-content: center;
26 | margin-bottom: 20px;
27 | }
28 |
29 | .button {
30 | margin: 10px;
31 | padding: 10px 20px;
32 | font-size: 16px;
33 | border: none;
34 | border-radius: 4px;
35 | background-color: #4caf50;
36 | color: white;
37 | cursor: pointer;
38 | }
39 |
40 | .positioning-type {
41 | width: 300px;
42 | margin: 10px;
43 | border: 1px solid #ccc;
44 | padding: 20px;
45 | display: none;
46 | }
47 |
48 | .positioning-type h2 {
49 | margin-top: 0;
50 | font-size: 24px;
51 | }
52 |
53 | .box {
54 | width: 200px;
55 | height: 200px;
56 | background-color: green;
57 | border: 1px solid #ccc;
58 | }
59 |
60 | /* Styles for the different types of positioning */
61 | .static .box {
62 | position: static;
63 | left: 50px;
64 | top: 50px;
65 | }
66 |
67 | .relative .box {
68 | position: relative;
69 | left: 50px;
70 | top: 50px;
71 | }
72 |
73 | .absolute .box {
74 | position: absolute;
75 | top: 50px;
76 | left: 50px;
77 | }
78 |
79 | .fixed .box {
80 | position: fixed;
81 | top: 50px;
82 | left: 50px;
83 | }
84 |
85 | /* Styles for the footer */
86 | footer {
87 | background-color: #ccc;
88 | padding: 10px;
89 | text-align: center;
90 | box-sizing: border-box;
91 | flex-grow: 0;
92 | flex-shrink: 0;
93 |
94 | width: 100%;
95 | }
96 |
97 | footer p {
98 | margin: 0;
99 | font-size: 14px;
100 | color: blue;
101 | }
102 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS Positioning Demo
6 |
7 |
8 |
9 |
10 |
11 | CSS Positioning Demo
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
Static Positioning
22 |
23 | position: static;
24 | left: 50px;
25 | top: 50px;
26 |
27 |
29 |
Relative Positioning
30 |
position: relative;
31 | left: 50px;
32 | top: 50px;
33 |
34 |
36 |
Absolute Positioning
37 |
38 | position: absolute;
39 | top: 50px;
40 | left: 50px;
41 |
42 |
43 |
45 |
Fixed Positioning
46 |
47 | position: fixed;
48 | top: 50px;
49 | left: 50px;
50 |
51 |
52 |