CSS Layout & Positioning - Complete Guide
CSS Layout & Positioning
Complete Guide to Display, Positioning, Float, Z-index, Overflow and Visibility
Week 3: Layout Fundamentals
Layout is the foundation of web design. Understanding CSS layout and positioning is crucial for creating well-structured, responsive, and visually appealing websites. This week covers the core concepts that control how elements are displayed and positioned on the page.
CSS layout properties control the structure and positioning of every element on your webpage
Display Property
The display property determines how an element is displayed in the document flow. It's one of the most important CSS properties for controlling layout.
Block Elements
display: block
Takes full width, starts on new line. Can have width/height set.
div { display: block; }
Block Element 1
Block Element 2 (60% width)
display: inline
Flows with text, only takes needed width. Ignores width/height.
span { display: inline; }
This is inline element 1 and inline element 2 within text flow.
Inline elements ignore width/height: Tries to be 200px
display: inline-block
Flows like inline but accepts width/height like block.
.button { display: inline-block; }
Button 1
Button 2
Button 3
Advanced Display Values
display: none
Completely removes element from document flow. Not accessible.
.hidden { display: none; }
Visible Element
Element After Hidden
display: flex
Creates flexible box layout. Children become flex items.
.container { display: flex; }
Flex Item 1
Flex Item 2 (flex: 2)
Flex Item 3
display: grid
Creates grid layout. Children become grid items.
.container { display: grid; }
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4 (span 2)
Grid Item 5
/* Display Property Examples */
/* Block Level Elements */
header, footer, div, h1-h6, p, ul {
display: block; /* Default for these elements */
}
/* Inline Elements */
span, a, strong, em, img {
display: inline; /* Default for these elements */
}
/* Inline-Block for Custom Buttons */
.button {
display: inline-block;
padding: 12px 24px;
background: #3b82f6;
color: white;
border-radius: 6px;
text-decoration: none;
width: 150px; /* Works with inline-block */
text-align: center;
}
/* Flexbox Layout */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #1e293b;
}
/* Grid Layout */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
/* Hiding Elements */
.hidden {
display: none; /* Completely removed from flow */
}
.temporarily-hidden {
visibility: hidden; /* Space preserved but invisible */
}
CSS Positioning
The position property specifies how an element is positioned in a document. Combined with top, right, bottom, and left properties, it gives you precise control over element placement.
position: static
Default position. Element flows in normal document order.
div { position: static; }
Static Element 1
Static Element 2 (top/left ignored)
position: relative
Positioned relative to its normal position. Space preserved.
.box { position: relative; top: 20px; left: 30px; }
Relative Element (normal position)
Moved 10px down, 30px right
Next element (space preserved above)
position: absolute
Positioned relative to nearest positioned ancestor. Removed from flow.
.menu { position: absolute; top: 100%; left: 0; }
Absolute (20,20)
Absolute (60, right:20)
Centered Bottom
position: fixed
Positioned relative to viewport. Stays fixed during scrolling.
.header { position: fixed; top: 0; left: 0; right: 0; }
Fixed Button
Scrollable content...
The fixed button stays in place.
More content to scroll...
Keep scrolling...
Button stays fixed!
position: sticky
Toggles between relative and fixed based on scroll position.
.sticky-header { position: sticky; top: 0; }
Sticky Header (sticks at top)
Scroll down to see sticky behavior...
Content here...
More content...
Another sticky element
Continue scrolling...
/* Positioning Examples */
/* Static - Default */
.static-element {
position: static;
/* top, right, bottom, left have NO effect */
}
/* Relative - Offset from normal position */
.relative-element {
position: relative;
top: 20px; /* Move down 20px from normal position */
left: 30px; /* Move right 30px from normal position */
/* Original space is preserved in document flow */
}
/* Absolute - Relative to positioned parent */
.parent {
position: relative; /* Creates positioning context */
}
.child {
position: absolute;
top: 0;
right: 0;
/* Positioned at top-right corner of .parent */
}
/* Fixed - Relative to viewport */
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
/* Stays at top of screen during scrolling */
}
/* Sticky - Hybrid behavior */
.sticky-nav {
position: sticky;
top: 0;
/* Behaves like relative until scrolled past,
then behaves like fixed */
}
/* Centering with Absolute Positioning */
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Perfectly centers element */
}
Float and Clear
The float property was traditionally used for wrapping text around images. While largely replaced by Flexbox and Grid, it's still important to understand for legacy code and specific use cases.
Float Examples
Float Right
Float Left
Multiple elements can be floated. They will stack horizontally until there's no more room, then wrap to the next line. This technique was used to create grid-like layouts before CSS Grid.
The Clear Property
Text next to floated element.
This element has
clear: left - it clears left floats and starts below them.
/* Float and Clear Examples */
/* Basic Float */
.image-float {
float: left;
margin: 0 20px 10px 0;
width: 200px;
}
/* Text wrapping around float */
.article-text {
line-height: 1.6;
text-align: justify;
}
/* Clearing Floats */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Modern alternative to float layouts */
.float-layout {
overflow: hidden; /* Contains floats */
}
.float-item {
float: left;
width: 33.333%;
padding: 15px;
box-sizing: border-box;
}
/* Clear property values */
.clear-left {
clear: left; /* Clear left floats only */
}
.clear-right {
clear: right; /* Clear right floats only */
}
.clear-both {
clear: both; /* Clear both left and right floats */
}
/* Creating columns with float (legacy technique) */
.column {
float: left;
width: 50%;
padding: 20px;
}
/* Containing floats - modern methods */
.container {
display: flow-root; /* Modern clearfix */
/* OR */
overflow: auto; /* Alternative clearfix */
}
Z-index and Stacking Context
The z-index property controls the vertical stacking order of elements that overlap. It only works on positioned elements (position: relative, absolute, fixed, or sticky).
Z-index Visualization
z-index: 1
z-index: 2
z-index: 3
z-index: 0
Stacking Context Rules
- Default z-index is auto (same as 0)
- Higher z-index values appear on top
- Negative values can go behind parent
- Only works on positioned elements
- Creates new stacking context
Common Use Cases
- Dropdown menus over content
- Modal dialogs and popups
- Fixed headers and footers
- Overlapping design elements
- Parallax scrolling effects
/* Z-index and Stacking Context */
/* Basic z-index usage */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* High value to appear on top */
background: white;
padding: 30px;
border-radius: 8px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999; /* Just below modal */
}
/* Negative z-index */
.background-element {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1; /* Goes behind parent */
background: #f0f0f0;
}
/* Creating stacking context */
.stacking-context {
position: relative;
z-index: 1; /* Creates new stacking context */
/* Children's z-index is relative to this context */
}
/* Z-index hierarchy */
.header {
position: fixed;
top: 0;
z-index: 100;
}
.dropdown {
position: absolute;
top: 100%;
z-index: 101; /* Above header */
}
.tooltip {
position: absolute;
z-index: 1000; /* Very high - above everything */
}
/* Handling z-index conflicts */
/* Use consistent z-index scale */
:root {
--z-index-dropdown: 100;
--z-index-sticky: 200;
--z-index-fixed: 300;
--z-index-modal: 400;
--z-index-popover: 500;
--z-index-tooltip: 600;
}
.modal {
z-index: var(--z-index-modal);
}
.tooltip {
z-index: var(--z-index-tooltip);
}
Overflow Property
The overflow property controls what happens when content overflows its container's box. It's essential for managing content in fixed-size containers.
overflow: visible
Default. Content overflows outside container.
div { overflow: visible; }
Content overflows visibly outside container
overflow: hidden
Clips overflowing content. No scrollbars.
div { overflow: hidden; }
overflow: scroll
Adds scrollbars always (even if not needed).
div { overflow: scroll; }
Scrollbars always visible. Content overflows.
overflow: auto
Adds scrollbars only when needed (recommended).
div { overflow: auto; }
Scrollbars appear automatically when needed
/* Overflow Property Examples */
/* Basic overflow control */
.scrollable-container {
height: 300px;
overflow: auto; /* Scrollbars when needed */
border: 1px solid #ddd;
padding: 20px;
}
/* Horizontal overflow */
.horizontal-scroll {
white-space: nowrap;
overflow-x: auto;
padding: 15px;
}
.horizontal-item {
display: inline-block;
width: 200px;
height: 150px;
margin-right: 15px;
background: #f0f0f0;
}
/* Overflow shortcuts */
.container {
overflow: hidden; /* Both axes */
overflow-x: auto; /* Horizontal only */
overflow-y: scroll; /* Vertical only */
}
/* Text overflow with ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
/* Multi-line text truncation */
.multiline-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Custom scrollbars (modern browsers) */
.custom-scroll {
overflow: auto;
max-height: 400px;
}
.custom-scroll::-webkit-scrollbar {
width: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
Visibility vs Display
Both visibility and display properties can hide elements, but they work differently. Understanding these differences is crucial for accessibility and layout.
display: nonevisibility: hiddenvisibility: collapseopacity: 0Visibility vs Display Demonstration
display: none
Visible Element 1
Visible Element 2 - No gap above
visibility: hidden
Visible Element 1
Visible Element 2 - Space preserved above
Interactive Comparison
Element with display: none
Click me! (display: none)
Element with visibility: hidden
/* Visibility vs Display */
/* display: none - Completely remove */
.hidden-element {
display: none;
/* Element is removed from flow */
/* No space reserved */
/* Not accessible to screen readers */
/* Better performance for heavy elements */
}
/* visibility: hidden - Hide but keep space */
.invisible-element {
visibility: hidden;
/* Element remains in flow */
/* Space is preserved */
/* Not accessible to screen readers */
/* Can affect performance for complex elements */
}
/* visibility: collapse - For tables */
table tr.collapsed {
visibility: collapse;
/* Removes row/column but preserves table structure */
/* Behaves like display: none for table elements */
}
/* opacity: 0 - Transparent but present */
.transparent-element {
opacity: 0;
/* Element is fully transparent */
/* Space is preserved */
/* Still accessible and interactive */
/* GPU accelerated - good for animations */
}
/* Accessibility considerations */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
/* Hidden visually but accessible to screen readers */
}
/* Transition between states */
.menu {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.menu.active {
visibility: visible;
opacity: 1;
}
/* Performance considerations */
/* Use display: none for heavy elements that won't be shown */
.heavy-widget {
display: none; /* Better performance when hidden */
}
/* Use visibility: hidden for layout that needs to maintain spacing */
.temporarily-hidden {
visibility: hidden; /* Maintains layout */
}
CSS Layout Practice Compiler
Practice CSS layout and positioning in the live editor below. Try different display values, positioning techniques, floats, z-index, overflow, and visibility properties to see immediate results.