Master CSS display types and positioning for precise element layout control. Learn block, inline, flex, grid, and positioning strategies.
CSS display and positioning properties are the fundamental building blocks of layout control. They determine how elements behave in the document flow, how they relate to other elements, and how they respond to positioning commands.
Understanding display properties is crucial for creating responsive layouts, while positioning gives you pixel-perfect control over element placement. Together, they form the foundation that more advanced layout systems like Flexbox and Grid are built upon.
This lesson will give you complete mastery over element behavior and positioning, enabling you to create any layout design from simple card arrangements to complex multi-layered interfaces.
The display property controls how elements participate in layout and how they interact with other elements.
Block Elements:
1.block-element {
2 display: block;
3 width: 100%; /* Takes full width by default */
4 margin: 10px 0; /* Vertical margins work */
5}
6
7/* Block elements: div, h1-h6, p, section, article */Inline Elements:
1.inline-element {
2 display: inline;
3 /* width and height are ignored */
4 /* vertical margins/padding don't affect layout */
5 padding: 5px 10px; /* Only horizontal padding affects neighbors */
6}
7
8/* Inline elements: span, a, strong, em, img */Inline-Block Elements:
1.inline-block-element {
2 display: inline-block;
3 width: 200px; /* Width and height work */
4 height: 100px;
5 margin: 10px; /* All margins work */
6 vertical-align: top; /* Controls baseline alignment */
7}None (Hidden):
1.hidden-element {
2 display: none; /* Completely removes from layout */
3}
4
5.invisible-element {
6 visibility: hidden; /* Takes space but invisible */
7}Modern Display Values:
1.flex-container { display: flex; }
2.grid-container { display: grid; }
3.table-display { display: table; }
4.contents { display: contents; } /* Children participate in parent's layout */Practical Applications:
1/* Navigation items */
2.nav-item {
3 display: inline-block;
4 padding: 10px 15px;
5 margin: 0 5px;
6}
7
8/* Card grid using inline-block */
9.card {
10 display: inline-block;
11 width: 300px;
12 vertical-align: top;
13 margin: 20px;
14}
15
16/* Toggle visibility */
17.mobile-menu {
18 display: none;
19}
20
21@media (max-width: 768px) {
22 .mobile-menu { display: block; }
23 .desktop-menu { display: none; }
24}CSS positioning removes elements from normal document flow and allows precise placement using top, right, bottom, left properties.
Static Positioning (Default):
1.static-position {
2 position: static; /* Default - follows normal flow */
3 /* top, right, bottom, left have no effect */
4}Relative Positioning:
1.relative-position {
2 position: relative;
3 top: 20px; /* Offset from original position */
4 left: 30px;
5 /* Still occupies original space in layout */
6}
7
8/* Creates positioning context for absolute children */
9.parent-context {
10 position: relative;
11}Absolute Positioning:
1.absolute-position {
2 position: absolute;
3 top: 50px; /* Relative to nearest positioned ancestor */
4 right: 20px;
5 /* Removed from normal flow - no space reserved */
6 z-index: 10;
7}
8
9/* Common absolute positioning patterns */
10.overlay {
11 position: absolute;
12 top: 0;
13 left: 0;
14 width: 100%;
15 height: 100%;
16 background: rgba(0,0,0,0.5);
17}
18
19.tooltip {
20 position: absolute;
21 bottom: 100%;
22 left: 50%;
23 transform: translateX(-50%);
24}Fixed Positioning:
1.fixed-position {
2 position: fixed;
3 top: 0; /* Relative to viewport */
4 left: 0;
5 width: 100%;
6 z-index: 1000;
7 /* Stays in place during scroll */
8}
9
10/* Common fixed elements */
11.fixed-header {
12 position: fixed;
13 top: 0;
14 left: 0;
15 right: 0;
16 height: 60px;
17 background: white;
18 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
19}
20
21.floating-button {
22 position: fixed;
23 bottom: 30px;
24 right: 30px;
25 border-radius: 50%;
26 z-index: 999;
27}Sticky Positioning:
1.sticky-position {
2 position: sticky;
3 top: 20px; /* Threshold for sticking */
4 background: white;
5 z-index: 10;
6}
7
8/* Sticky navigation */
9.sticky-nav {
10 position: sticky;
11 top: 0;
12 background: white;
13 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
14}
15
16/* Sticky sidebar */
17.sticky-sidebar {
18 position: sticky;
19 top: 80px; /* Account for header height */
20 height: calc(100vh - 80px);
21 overflow-y: auto;
22}Z-index controls the layering of positioned elements, but stacking contexts create complex hierarchies that must be understood for proper layering.
Basic Z-Index:
1.layer-1 {
2 position: relative;
3 z-index: 1;
4}
5
6.layer-2 {
7 position: absolute;
8 z-index: 2; /* Higher number = in front */
9}
10
11.layer-negative {
12 position: relative;
13 z-index: -1; /* Behind normal flow */
14}Stacking Context Creation:
Elements create new stacking contexts when they have:
1/* Creates stacking context */
2.new-context {
3 position: relative;
4 z-index: 1; /* Any z-index value */
5 opacity: 0.99; /* opacity < 1 */
6 transform: translateZ(0); /* any transform */
7}
8
9/* Children stack only within this context */
10.child-layer {
11 position: absolute;
12 z-index: 999; /* Only compares with siblings */
13}Practical Stacking Strategies:
1/* Layer hierarchy system */
2.layer-base { z-index: 1; } /* Background elements */
3.layer-content { z-index: 10; } /* Main content */
4.layer-navigation { z-index: 100; } /* Navigation bars */
5.layer-dropdown { z-index: 200; } /* Dropdowns */
6.layer-modal { z-index: 1000; } /* Modals */
7.layer-tooltip { z-index: 1100; } /* Tooltips */
8.layer-debug { z-index: 9999; } /* Debug overlays */
9
10/* Modal implementation */
11.modal-backdrop {
12 position: fixed;
13 top: 0;
14 left: 0;
15 width: 100%;
16 height: 100%;
17 background: rgba(0,0,0,0.5);
18 z-index: 1000;
19}
20
21.modal-content {
22 position: fixed;
23 top: 50%;
24 left: 50%;
25 transform: translate(-50%, -50%);
26 background: white;
27 border-radius: 8px;
28 z-index: 1001; /* Above backdrop */
29}Advanced Positioning Techniques:
1/* Centering with positioning */
2.center-absolute {
3 position: absolute;
4 top: 50%;
5 left: 50%;
6 transform: translate(-50%, -50%);
7}
8
9/* Full coverage overlay */
10.full-overlay {
11 position: absolute;
12 inset: 0; /* Shorthand for top:0 right:0 bottom:0 left:0 */
13 background: rgba(0,0,0,0.5);
14}
15
16/* Responsive positioning */
17.responsive-position {
18 position: absolute;
19 top: 20px;
20 right: 20px;
21}
22
23@media (max-width: 768px) {
24 .responsive-position {
25 position: fixed;
26 bottom: 20px;
27 right: 20px;
28 top: auto;
29 }
30}Combining display and positioning properties effectively requires understanding their interactions and choosing the right approach for each use case.
Layout Strategy Decision Tree:
For Content Flow: Use normal flow (display: block/inline)
For Horizontal Alignment: Use display: inline-block or flexbox
For Grid Layouts: Use CSS Grid or flexbox
For Overlays: Use absolute/fixed positioning
For Persistent Elements: Use sticky positioning
Common Layout Patterns:
1. Header, Content, Footer Layout:
1.page-layout {
2 min-height: 100vh;
3 display: flex;
4 flex-direction: column;
5}
6
7.header {
8 position: sticky;
9 top: 0;
10 background: white;
11 z-index: 100;
12}
13
14.main-content {
15 flex: 1;
16 position: relative;
17}
18
19.footer {
20 margin-top: auto;
21}2. Sidebar + Content Layout:
1.layout-container {
2 display: flex;
3 min-height: 100vh;
4}
5
6.sidebar {
7 width: 250px;
8 position: sticky;
9 top: 0;
10 height: 100vh;
11 overflow-y: auto;
12}
13
14.content {
15 flex: 1;
16 position: relative;
17}3. Card with Positioned Elements:
1.card {
2 position: relative;
3 background: white;
4 border-radius: 8px;
5 padding: 20px;
6 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
7}
8
9.card-badge {
10 position: absolute;
11 top: -10px;
12 right: -10px;
13 background: red;
14 color: white;
15 border-radius: 50%;
16 width: 30px;
17 height: 30px;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21}
22
23.card-overlay {
24 position: absolute;
25 inset: 0;
26 background: rgba(0,0,0,0.5);
27 display: flex;
28 align-items: center;
29 justify-content: center;
30 opacity: 0;
31 transition: opacity 0.3s;
32}
33
34.card:hover .card-overlay {
35 opacity: 1;
36}Performance Considerations:
1/* Promote to GPU layer for smooth animations */
2.gpu-accelerated {
3 transform: translateZ(0);
4 /* or */
5 will-change: transform;
6}
7
8/* Avoid repositioning during scroll */
9.scroll-optimized {
10 transform: translate3d(0,0,0);
11}Common Pitfalls and Solutions:
1/* Problem: Absolute positioned child breaks out of parent */
2.containing-parent {
3 position: relative; /* Solution: Create positioning context */
4}
5
6/* Problem: Fixed element covers content */
7.main-content {
8 padding-top: 60px; /* Solution: Account for fixed header height */
9}
10
11/* Problem: Z-index not working */
12.positioned-element {
13 position: relative; /* Solution: Must be positioned for z-index */
14 z-index: 10;
15}A comprehensive demonstration of CSS display properties and positioning techniques with practical layouts, overlays, and interactive elements.
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 <title>Display & Positioning - Layout Mastery</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 line-height: 1.6;
17 color: #333;
18 background: #f8fafc;
19 }
20
21 /* Fixed Header */
22 .fixed-header {
23 position: fixed;
24 top: 0;
25 left: 0;
26 right: 0;
27 height: 60px;
28 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29 color: white;
30 display: flex;
31 align-items: center;
32 padding: 0 20px;
33 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
34 z-index: 1000;
35 }
36
37 .logo {
38 font-size: 1.5rem;
39 font-weight: bold;
40 }
41
42 .nav-menu {
43 margin-left: auto;
44 display: flex;
45 gap: 20px;
46 }
47
48 .nav-item {
49 color: white;
50 text-decoration: none;
51 padding: 8px 16px;
52 border-radius: 20px;
53 transition: background 0.3s;
54 }
55
56 .nav-item:hover {
57 background: rgba(255,255,255,0.2);
58 }
59
60 /* Main Content with Top Padding for Fixed Header */
61 .main-content {
62 padding-top: 80px;
63 max-width: 1200px;
64 margin: 0 auto;
65 padding-left: 20px;
66 padding-right: 20px;
67 }
68
69 /* Hero Section with Relative Positioning */
70 .hero {
71 position: relative;
72 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
73 color: white;
74 padding: 80px 40px;
75 text-align: center;
76 border-radius: 20px;
77 margin-bottom: 40px;
78 overflow: hidden;
79 }
80
81 .hero::before {
82 content: '';
83 position: absolute;
84 top: -50%;
85 left: -50%;
86 width: 200%;
87 height: 200%;
88 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
89 animation: rotate 20s linear infinite;
90 }
91
92 @keyframes rotate {
93 to { transform: rotate(360deg); }
94 }
95
96 .hero-content {
97 position: relative;
98 z-index: 2;
99 }
100
101 .hero h1 {
102 font-size: 3rem;
103 margin-bottom: 1rem;
104 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
105 }
106
107 /* Display Property Showcase */
108 .section {
109 margin-bottom: 60px;
110 background: white;
111 border-radius: 16px;
112 padding: 40px;
113 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
114 }
115
116 .section-title {
117 font-size: 2rem;
118 color: #1e293b;
119 margin-bottom: 2rem;
120 text-align: center;
121 }
122
123 /* Block Elements Demo */
124 .block-demo {
125 display: block;
126 background: #dbeafe;
127 padding: 15px;
128 margin: 10px 0;
129 border-radius: 8px;
130 border-left: 4px solid #3b82f6;
131 }
132
133 /* Inline Elements Demo */
134 .inline-demo {
135 display: inline;
136 background: #dcfce7;
137 padding: 5px 10px;
138 border-radius: 4px;
139 margin: 0 5px;
140 }
141
142 /* Inline-Block Elements Demo */
143 .inline-block-demo {
144 display: inline-block;
145 width: 150px;
146 height: 100px;
147 background: #fef3c7;
148 margin: 10px;
149 border-radius: 8px;
150 text-align: center;
151 line-height: 100px;
152 vertical-align: top;
153 transition: transform 0.3s;
154 }
155
156 .inline-block-demo:hover {
157 transform: translateY(-5px);
158 }
159
160 /* Positioning Showcase */
161 .position-container {
162 position: relative;
163 height: 300px;
164 background: #f1f5f9;
165 border-radius: 12px;
166 margin: 20px 0;
167 border: 2px dashed #94a3b8;
168 }
169
170 .positioned-element {
171 width: 120px;
172 height: 60px;
173 background: #3b82f6;
174 color: white;
175 display: flex;
176 align-items: center;
177 justify-content: center;
178 border-radius: 8px;
179 font-weight: bold;
180 font-size: 14px;
181 }
182
183 .relative-pos {
184 position: relative;
185 top: 20px;
186 left: 20px;
187 background: #10b981;
188 }
189
190 .absolute-pos {
191 position: absolute;
192 top: 50px;
193 right: 50px;
194 background: #f59e0b;
195 }
196
197 .absolute-center {
198 position: absolute;
199 top: 50%;
200 left: 50%;
201 transform: translate(-50%, -50%);
202 background: #8b5cf6;
203 }
204
205 /* Sticky Navigation Demo */
206 .sticky-nav {
207 position: sticky;
208 top: 70px;
209 background: white;
210 padding: 15px 0;
211 margin: 20px 0;
212 border-radius: 12px;
213 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
214 z-index: 100;
215 }
216
217 .sticky-nav ul {
218 display: flex;
219 justify-content: center;
220 gap: 30px;
221 list-style: none;
222 }
223
224 .sticky-nav a {
225 color: #1e293b;
226 text-decoration: none;
227 padding: 8px 16px;
228 border-radius: 8px;
229 transition: all 0.3s;
230 }
231
232 .sticky-nav a:hover {
233 background: #3b82f6;
234 color: white;
235 }
236
237 /* Card Grid with Positioning Elements */
238 .card-grid {
239 display: grid;
240 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
241 gap: 30px;
242 margin: 30px 0;
243 }
244
245 .card {
246 position: relative;
247 background: white;
248 border-radius: 16px;
249 padding: 30px;
250 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
251 transition: all 0.3s ease;
252 overflow: hidden;
253 }
254
255 .card:hover {
256 transform: translateY(-8px);
257 box-shadow: 0 12px 40px rgba(0,0,0,0.15);
258 }
259
260 .card-badge {
261 position: absolute;
262 top: -10px;
263 right: -10px;
264 width: 40px;
265 height: 40px;
266 background: linear-gradient(135deg, #ff6b6b, #feca57);
267 color: white;
268 border-radius: 50%;
269 display: flex;
270 align-items: center;
271 justify-content: center;
272 font-weight: bold;
273 font-size: 14px;
274 z-index: 10;
275 }
276
277 .card-overlay {
278 position: absolute;
279 inset: 0;
280 background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(139,92,246,0.9));
281 color: white;
282 display: flex;
283 align-items: center;
284 justify-content: center;
285 opacity: 0;
286 transition: opacity 0.3s;
287 border-radius: 16px;
288 }
289
290 .card:hover .card-overlay {
291 opacity: 1;
292 }
293
294 /* Z-Index Demo */
295 .z-index-demo {
296 position: relative;
297 height: 200px;
298 background: #f8fafc;
299 border-radius: 12px;
300 margin: 20px 0;
301 }
302
303 .layer {
304 position: absolute;
305 width: 100px;
306 height: 100px;
307 border-radius: 8px;
308 display: flex;
309 align-items: center;
310 justify-content: center;
311 color: white;
312 font-weight: bold;
313 }
314
315 .layer-1 { background: #ef4444; top: 20px; left: 20px; z-index: 1; }
316 .layer-2 { background: #10b981; top: 40px; left: 40px; z-index: 2; }
317 .layer-3 { background: #3b82f6; top: 60px; left: 60px; z-index: 3; }
318
319 /* Modal Demo */
320 .modal {
321 position: fixed;
322 inset: 0;
323 background: rgba(0,0,0,0.5);
324 display: flex;
325 align-items: center;
326 justify-content: center;
327 z-index: 2000;
328 opacity: 0;
329 visibility: hidden;
330 transition: all 0.3s;
331 }
332
333 .modal.active {
334 opacity: 1;
335 visibility: visible;
336 }
337
338 .modal-content {
339 background: white;
340 padding: 40px;
341 border-radius: 16px;
342 max-width: 500px;
343 width: 90%;
344 max-height: 80vh;
345 overflow-y: auto;
346 position: relative;
347 transform: scale(0.9);
348 transition: transform 0.3s;
349 }
350
351 .modal.active .modal-content {
352 transform: scale(1);
353 }
354
355 .modal-close {
356 position: absolute;
357 top: 15px;
358 right: 15px;
359 background: none;
360 border: none;
361 font-size: 24px;
362 cursor: pointer;
363 color: #64748b;
364 }
365
366 /* Floating Action Button */
367 .fab {
368 position: fixed;
369 bottom: 30px;
370 right: 30px;
371 width: 60px;
372 height: 60px;
373 border-radius: 50%;
374 background: linear-gradient(135deg, #667eea, #764ba2);
375 color: white;
376 border: none;
377 font-size: 24px;
378 cursor: pointer;
379 box-shadow: 0 8px 25px rgba(0,0,0,0.3);
380 z-index: 1500;
381 transition: all 0.3s ease;
382 }
383
384 .fab:hover {
385 transform: scale(1.1);
386 box-shadow: 0 12px 40px rgba(0,0,0,0.4);
387 }
388
389 /* Tooltip */
390 .tooltip {
391 position: relative;
392 display: inline-block;
393 }
394
395 .tooltip-text {
396 position: absolute;
397 bottom: 125%;
398 left: 50%;
399 transform: translateX(-50%);
400 background: #1e293b;
401 color: white;
402 padding: 8px 12px;
403 border-radius: 6px;
404 font-size: 14px;
405 white-space: nowrap;
406 opacity: 0;
407 visibility: hidden;
408 transition: all 0.3s;
409 z-index: 1000;
410 }
411
412 .tooltip-text::after {
413 content: '';
414 position: absolute;
415 top: 100%;
416 left: 50%;
417 transform: translateX(-50%);
418 border: 5px solid transparent;
419 border-top-color: #1e293b;
420 }
421
422 .tooltip:hover .tooltip-text {
423 opacity: 1;
424 visibility: visible;
425 }
426
427 /* Responsive Design */
428 @media (max-width: 768px) {
429 .nav-menu { display: none; }
430 .hero h1 { font-size: 2rem; }
431 .main-content { padding-left: 15px; padding-right: 15px; }
432 .section { padding: 20px; }
433 .inline-block-demo { width: 100px; height: 80px; line-height: 80px; }
434 }
435
436 /* Utility Classes */
437 .btn {
438 display: inline-block;
439 padding: 12px 24px;
440 background: #3b82f6;
441 color: white;
442 text-decoration: none;
443 border-radius: 8px;
444 transition: background 0.3s;
445 border: none;
446 cursor: pointer;
447 font-size: 16px;
448 }
449
450 .btn:hover {
451 background: #2563eb;
452 }
453
454 .text-center { text-align: center; }
455 .mb-2 { margin-bottom: 1rem; }
456 .mt-4 { margin-top: 2rem; }
457 </style>
458</head>
459<body>
460 <!-- Fixed Header -->
461 <header class="fixed-header">
462 <div class="logo">🎯 CSS Layout Master</div>
463 <nav class="nav-menu">
464 <a href="#display" class="nav-item">Display</a>
465 <a href="#position" class="nav-item">Position</a>
466 <a href="#zindex" class="nav-item">Z-Index</a>
467 <a href="#layouts" class="nav-item">Layouts</a>
468 </nav>
469 </header>
470
471 <!-- Main Content -->
472 <main class="main-content">
473 <!-- Hero Section -->
474 <section class="hero">
475 <div class="hero-content">
476 <h1>Display & Positioning Mastery</h1>
477 <p>Complete control over element layout and positioning in CSS</p>
478 </div>
479 </section>
480
481 <!-- Sticky Navigation -->
482 <nav class="sticky-nav">
483 <ul>
484 <li><a href="#display">Display Properties</a></li>
485 <li><a href="#position">Positioning</a></li>
486 <li><a href="#zindex">Stacking</a></li>
487 <li><a href="#layouts">Layouts</a></li>
488 </ul>
489 </nav>
490
491 <!-- Display Properties Section -->
492 <section id="display" class="section">
493 <h2 class="section-title">📐 Display Properties</h2>
494
495 <h3>Block Elements</h3>
496 <div class="block-demo">Block Element 1 - Takes full width</div>
497 <div class="block-demo">Block Element 2 - Stacks vertically</div>
498
499 <h3 class="mt-4">Inline Elements</h3>
500 <p>Here are some
501 <span class="inline-demo">inline</span>
502 <span class="inline-demo">elements</span>
503 <span class="inline-demo">together</span>
504 in a paragraph.
505 </p>
506
507 <h3 class="mt-4">Inline-Block Elements</h3>
508 <div class="text-center">
509 <div class="inline-block-demo">Card 1</div>
510 <div class="inline-block-demo">Card 2</div>
511 <div class="inline-block-demo">Card 3</div>
512 </div>
513 </section>
514
515 <!-- Positioning Section -->
516 <section id="position" class="section">
517 <h2 class="section-title">🎯 Positioning Techniques</h2>
518
519 <h3>Relative, Absolute & Centered Positioning</h3>
520 <div class="position-container">
521 <div class="positioned-element">Normal Flow</div>
522 <div class="positioned-element relative-pos">Relative</div>
523 <div class="positioned-element absolute-pos">Absolute</div>
524 <div class="positioned-element absolute-center">Centered</div>
525 </div>
526
527 <p>The container above shows different positioning types working together. The relative element is offset from its normal position, the absolute element is positioned relative to the container, and the centered element uses transform for perfect centering.</p>
528 </section>
529
530 <!-- Z-Index Section -->
531 <section id="zindex" class="section">
532 <h2 class="section-title">📚 Z-Index & Stacking</h2>
533
534 <div class="z-index-demo">
535 <div class="layer layer-1">Z: 1</div>
536 <div class="layer layer-2">Z: 2</div>
537 <div class="layer layer-3">Z: 3</div>
538 </div>
539
540 <p>Each layer has a higher z-index value, stacking them in order. The blue box (z-index: 3) appears on top.</p>
541 </section>
542
543 <!-- Practical Layouts Section -->
544 <section id="layouts" class="section">
545 <h2 class="section-title">🏗️ Practical Layouts</h2>
546
547 <div class="card-grid">
548 <div class="card">
549 <div class="card-badge">New</div>
550 <h3>Interactive Card</h3>
551 <p>This card has a positioned badge and hover overlay effect. The badge uses absolute positioning relative to the card.</p>
552 <div class="card-overlay">
553 <div>
554 <h4>Overlay Content</h4>
555 <p>This overlay appears on hover using absolute positioning and opacity transitions.</p>
556 </div>
557 </div>
558 </div>
559
560 <div class="card">
561 <div class="card-badge">Hot</div>
562 <h3>Tooltip Example</h3>
563 <p>Hover over this
564 <span class="tooltip">
565 highlighted text
566 <span class="tooltip-text">This is a CSS-only tooltip!</span>
567 </span>
568 to see a positioned tooltip.
569 </p>
570 <div class="card-overlay">
571 <div>
572 <h4>Another Overlay</h4>
573 <p>Each card can have its own overlay content and interactions.</p>
574 </div>
575 </div>
576 </div>
577
578 <div class="card">
579 <div class="card-badge">Pro</div>
580 <h3>Modal Trigger</h3>
581 <p>Click the button below to see a modal with fixed positioning and proper z-index stacking.</p>
582 <button class="btn" onclick="openModal()">Open Modal</button>
583 <div class="card-overlay">
584 <div>
585 <h4>Modal Demo</h4>
586 <p>The modal uses fixed positioning and high z-index for proper layering.</p>
587 </div>
588 </div>
589 </div>
590 </div>
591 </section>
592
593 <!-- Summary Section -->
594 <section class="section text-center">
595 <h2 class="section-title">🎉 Layout Mastery Achieved!</h2>
596 <p>You've mastered CSS display and positioning fundamentals!</p>
597
598 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 2rem 0;">
599 <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; border-radius: 12px;">
600 <strong>✅ Display Control</strong><br>
601 <small>Block, Inline, Inline-Block</small>
602 </div>
603 <div style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; padding: 20px; border-radius: 12px;">
604 <strong>✅ Positioning</strong><br>
605 <small>Static, Relative, Absolute, Fixed, Sticky</small>
606 </div>
607 <div style="background: linear-gradient(135deg, #43e97b, #38f9d7); color: white; padding: 20px; border-radius: 12px;">
608 <strong>✅ Z-Index</strong><br>
609 <small>Stacking Contexts & Layering</small>
610 </div>
611 <div style="background: linear-gradient(135deg, #fa709a, #fee140); color: white; padding: 20px; border-radius: 12px;">
612 <strong>✅ Layouts</strong><br>
613 <small>Complex Positioning Patterns</small>
614 </div>
615 </div>
616 </section>
617 </main>
618
619 <!-- Modal -->
620 <div class="modal" id="modal">
621 <div class="modal-content">
622 <button class="modal-close" onclick="closeModal()">×</button>
623 <h2>Modal Example</h2>
624 <p>This modal demonstrates fixed positioning with proper z-index stacking. It's positioned relative to the viewport and stays in place even when scrolling.</p>
625 <p>The backdrop uses rgba() for transparency, and the modal content is centered using flexbox on the backdrop.</p>
626 <button class="btn" onclick="closeModal()">Close Modal</button>
627 </div>
628 </div>
629
630 <!-- Floating Action Button -->
631 <button class="fab" onclick="scrollToTop()" title="Scroll to top">↑</button>
632
633 <script>
634 function openModal() {
635 document.getElementById('modal').classList.add('active');
636 }
637
638 function closeModal() {
639 document.getElementById('modal').classList.remove('active');
640 }
641
642 function scrollToTop() {
643 window.scrollTo({ top: 0, behavior: 'smooth' });
644 }
645
646 // Close modal when clicking backdrop
647 document.getElementById('modal').addEventListener('click', function(e) {
648 if (e.target === this) {
649 closeModal();
650 }
651 });
652 </script>
653</body>
654</html>This comprehensive demonstration covers all CSS Display & Positioning concepts from Lesson 6:
📐 Complete Display Property Coverage:
🎯 All Positioning Techniques:
📚 Z-Index and Stacking Mastery:
🏗️ Real-World Layout Applications:
This example demonstrates how display and positioning properties work together to create sophisticated, interactive layouts that form the foundation of modern web interfaces.
Outstanding work mastering display and positioning! You now have precise control over element layout and behavior. Next, we'll explore "Flexbox Layout" where you'll learn modern, powerful layout techniques for creating flexible, responsive designs with ease. Get ready to revolutionize how you approach CSS layouts!
Your progress is saved in this browser, on this device only.