CSS Position: Complete Guide to Element Positioning and Layers Control
Professional Guide by Alaa Amer – Expert Web Developer & Designer
CSS Position provides precise control over element positioning. Learn how to create complex layouts and advanced visual effects.
1️⃣ Basic Position Types
Overview of Values
.position-types {
/* Different position values */
position: static; /* natural position (default) */
position: relative; /* relative to original position */
position: absolute; /* relative to nearest positioned container */
position: fixed; /* relative to browser window */
position: sticky; /* hybrid between relative and fixed */
}
/* Position properties */
.positioning-properties {
top: 10px; /* from top */
right: 20px; /* from right */
bottom: 15px; /* from bottom */
left: 25px; /* from left */
z-index: 10; /* layer order */
}
2️⃣ Static Position - Natural Position
.static-example {
position: static; /* default - usually no need to write */
/* These properties don't work with static */
/* top: 10px; ← won't work */
/* left: 20px; ← won't work */
/* z-index: 5; ← won't work */
}
/* Static elements flow naturally */
.normal-flow {
/* Elements appear according to HTML order */
/* Cannot be moved from natural position */
}
3️⃣ Relative Position - Relative Positioning
.relative-example {
position: relative;
/* Move relative to original position */
top: 20px; /* 20px from top */
left: 30px; /* 30px from left */
/* Element keeps original space in flow */
/* Other elements are not affected */
}
/* Practical uses for relative */
.card-with-badge {
position: relative; /* reference for absolute elements inside */
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.badge {
position: absolute;
top: -8px;
right: -8px;
background: #e53e3e;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
/* Advanced hover effect */
.hover-card {
position: relative;
transition: transform 0.3s ease;
}
.hover-card:hover {
transform: translateY(-5px); /* better alternative to top */
}
.hover-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 123, 255, 0.9);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.hover-card:hover .hover-overlay {
opacity: 1;
}
4️⃣ Absolute Position - Absolute Positioning
.absolute-example {
position: absolute;
/* Move relative to nearest positioned container */
top: 0;
right: 0;
/* Element exits normal flow */
/* Takes no space in layout */
}
/* Positioned container for absolute elements */
.positioned-container {
position: relative; /* or absolute or fixed */
/* Absolute elements inside will be relative to this */
}
/* Practical applications */
/* Close buttons */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.close-button {
position: absolute;
top: 15px;
right: 15px;
background: #f56565;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 18px;
}
/* Absolute centering */
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Works with any element size */
}
/* Four corners layout */
.corner-elements {
position: relative;
min-height: 300px;
background: #f8f9fa;
border: 2px solid #dee2e6;
}
.top-left {
position: absolute;
top: 10px;
left: 10px;
}
.top-right {
position: absolute;
top: 10px;
right: 10px;
}
.bottom-left {
position: absolute;
bottom: 10px;
left: 10px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
}
/* Full stretch */
.absolute-stretch {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Fills entire container */
}
5️⃣ Fixed Position - Fixed Positioning
.fixed-example {
position: fixed;
/* Move relative to browser window */
top: 20px;
right: 20px;
/* Stays in same place when scrolling */
/* Exits normal flow */
}
/* Practical uses for fixed */
/* Fixed navigation bar */
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px 20px;
z-index: 100;
}
/* Add padding to body to avoid overlap */
body.has-fixed-navbar {
padding-top: 70px; /* based on navbar height */
}
/* Back to top button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #007bff;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Fixed sidebar */
.fixed-sidebar {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: #2d3748;
color: white;
padding: 20px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.fixed-sidebar.open {
transform: translateX(0);
}
/* Fixed notification */
.fixed-notification {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #48bb78;
color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
6️⃣ Sticky Position - Sticky Positioning
.sticky-example {
position: sticky;
top: 20px; /* distance from top when sticking */
/* Behaves like relative until reaching specified position */
/* Then becomes fixed at that position */
}
/* Practical uses for sticky */
/* Sticky section headers */
.sticky-section-header {
position: sticky;
top: 0;
background: white;
padding: 15px 20px;
border-bottom: 1px solid #e0e6ed;
font-weight: 600;
z-index: 10;
}
/* Table with sticky headers */
.sticky-table {
max-height: 400px;
overflow-y: auto;
border: 1px solid #e0e6ed;
border-radius: 8px;
}
.sticky-table thead th {
position: sticky;
top: 0;
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
padding: 12px 15px;
font-weight: 600;
z-index: 10;
}
/* Sticky progress bar */
.sticky-progress {
position: sticky;
top: 0;
height: 4px;
background: #e0e6ed;
z-index: 50;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #4299e1, #63b3ed);
width: 0%;
transition: width 0.3s ease;
}
/* Sticky navigation */
.sticky-nav {
position: sticky;
top: 80px; /* below fixed bar */
background: white;
border-bottom: 1px solid #e0e6ed;
padding: 10px 0;
z-index: 40;
}
.sticky-nav ul {
display: flex;
justify-content: center;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.sticky-nav a {
text-decoration: none;
color: #4a5568;
font-weight: 500;
padding: 8px 15px;
border-radius: 6px;
transition: all 0.3s ease;
}
.sticky-nav a:hover,
.sticky-nav a.active {
background: #ebf8ff;
color: #2b6cb0;
}
7️⃣ Z-index and Layers
/* Understanding z-index */
.z-index-examples {
/* z-index only works with positioned elements */
position: relative; /* or absolute, fixed, sticky */
/* z-index values */
z-index: 1; /* basic layer */
z-index: 10; /* medium layer */
z-index: 100; /* high layer */
z-index: 1000; /* very high layer */
z-index: -1; /* behind normal elements */
}
/* Stacking Context */
.stacking-context {
position: relative;
z-index: 1;
/* Creates new stacking context */
/* Child elements are numbered relative to this */
}
/* Practical example - overlapping windows */
.window-system {
position: relative;
height: 500px;
background: #f0f4f8;
overflow: hidden;
}
.window {
position: absolute;
background: white;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
min-width: 300px;
min-height: 200px;
}
.window-1 {
top: 50px;
left: 50px;
z-index: 1;
}
.window-2 {
top: 100px;
left: 150px;
z-index: 2;
}
.window-3 {
top: 150px;
left: 250px;
z-index: 3;
}
.window.active {
z-index: 100; /* active window in front */
}
/* System layers */
.system-layers {
/* Logically ordered layers */
--layer-background: -10;
--layer-content: 0;
--layer-overlay: 10;
--layer-dropdown: 100;
--layer-tooltip: 200;
--layer-modal: 1000;
--layer-notification: 2000;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: var(--layer-modal);
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: calc(var(--layer-modal) + 1);
}
8️⃣ Practical Project: Advanced App Interface
The HTML and CSS structure remains the same as the Arabic version, with appropriate text direction and language adjustments for English.
Summary
In this lesson we learned:
✅ Five Position types ✅ Relative and Absolute positioning ✅ Fixed and Sticky positioning ✅ Z-index and layer management ✅ Comprehensive advanced interface project
In the next lesson we'll study Responsive Design and Media Queries.