CSS Display & Positioning

Master the fundamental concepts of CSS layout and element positioning. This guide covers everything from basic display properties to advanced layout systems.

Display Property Basics
CSS Positioning
Flexbox Layout System
CSS Grid Layout
Z-index & Stacking Context
Float & Clear

1. Display Property Basics

📚 Theory Overview

The display property is one of the most important CSS properties that determines how an element is rendered on the page.

Key Display Values:

block - Elements take the full width available and start on a new line (e.g., div, p, h1-h6)
inline - Elements flow within text content and only take necessary width (e.g., span, a, strong)
inline-block - Hybrid: flows like inline but accepts width/height like block
none - Element is completely removed from the document flow (not just hidden)
flex - Enables flexbox layout (covered in section 3)
grid - Enables grid layout (covered in section 4)

💡 Important Note: The display property affects the element's outer display type (how it participates in flow layout) and inner display type (how its children are laid out).

🛠️ Practical Examples

See how different display values affect element behavior:

CSS Example

/* Block elements */
.block-demo {
  display: block;
  width: 250px;
  height: 60px;
  background: #3498db;
  margin: 10px 0;
  color: white;
  padding: 15px;
  text-align: center;
}

/* Inline elements */
.inline-demo {
  display: inline;
  background: #e74c3c;
  color: white;
  padding: 5px 10px;
  margin: 0 5px;
  /* Note: width/height ignored for inline elements */
}

/* Inline-block elements */
.inline-block-demo {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: #2ecc71;
  color: white;
  text-align: center;
  padding: 15px;
  margin: 5px;
}

/* Hidden element */
.hidden-demo {
  display: none;
}

/* Content box for context */
.content-box {
  border: 2px solid #ddd;
  padding: 20px;
  margin-top: 20px;
}

2. CSS Positioning

📚 Theory Overview

The position property specifies how an element is positioned in the document. Combined with top, right, bottom, and left properties.

Position Values:

Value	Description	Reference Point
`static`	Default. Element follows normal document flow	Not positioned
`relative`	Positioned relative to its normal position	Its normal position
`absolute`	Removed from flow, positioned relative to nearest positioned ancestor	Nearest positioned ancestor
`fixed`	Removed from flow, positioned relative to viewport	Viewport (browser window)
`sticky`	Hybrid of relative and fixed based on scroll position	Scroll container

⚠️ Important: For absolute, fixed, and sticky positioning, you must also specify at least one of: top, right, bottom, or left.

🛠️ Practical Examples

Interactive demonstration of different position values:

CSS Example

/* Container for positioning context */
.position-container {
  position: relative;
  width: 100%;
  height: 300px;
  background: #f8f9fa;
  border: 2px dashed #bdc3c7;
  margin: 20px 0;
  padding: 10px;
}

/* Different position examples */
.static-example {
  position: static;
  background: #3498db;
  color: white;
  padding: 15px;
  width: 150px;
}

.relative-example {
  position: relative;
  background: #2ecc71;
  color: white;
  padding: 15px;
  width: 150px;
  /* Offset from normal position */
  top: 20px;
  left: 40px;
}

.absolute-example {
  position: absolute;
  background: #e74c3c;
  color: white;
  padding: 15px;
  width: 150px;
  /* Position within container */
  top: 10px;
  right: 20px;
}

.fixed-example {
  position: fixed;
  background: #9b59b6;
  color: white;
  padding: 15px;
  width: 150px;
  /* Fixed to viewport */
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.sticky-example {
  position: sticky;
  background: #f39c12;
  color: white;
  padding: 15px;
  top: 0;
  z-index: 100;
}

.scroll-content {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
}

3. Flexbox Layout System

📚 Theory Overview

Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for efficient space distribution and alignment.

Key Concepts:

Flex Container - Parent element with display: flex
Flex Items - Direct children of flex container
Main Axis - Primary axis (horizontal by default)
Cross Axis - Perpendicular to main axis

Container Properties:

flex-direction - Row/column direction
justify-content - Main axis alignment
align-items - Cross axis alignment
flex-wrap - Single or multi-line
gap - Space between items

Item Properties:

flex-grow - Ability to grow if space available
flex-shrink - Ability to shrink if necessary
flex-basis - Default size before distribution
align-self - Override align-items for single item

💡 Pro Tip: Use flex: 1 as shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0.

🛠️ Practical Examples

CSS Example

/* Flex Container */
.flex-container-demo {
  display: flex;
  background: #f1f2f6;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  min-height: 120px;
}

/* Flex Items */
.flex-item-demo {
  background: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  border-radius: 4px;
  text-align: center;
  flex: 1;
}

/* Flex Direction Examples */
.flex-row { flex-direction: row; }
.flex-column { 
  flex-direction: column; 
  height: 200px;
}

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.align-stretch { align-items: stretch; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

/* Flex Wrap */
.flex-wrap-demo { flex-wrap: wrap; }

/* Individual Item Controls */
.grow-2 { flex-grow: 2; }
.grow-1 { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; width: 100px; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

4. CSS Grid Layout

📚 Theory Overview

CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, perfect for complex layouts.

Key Concepts:

Grid Container - Parent with display: grid
Grid Items - Direct children
Grid Lines - Dividing lines between columns/rows
Grid Tracks - Space between two grid lines (columns/rows)
Grid Cells - Single unit of grid
Grid Areas - Rectangular space covering multiple cells

Essential Properties:

grid-template-columns - Define column sizes
grid-template-rows - Define row sizes
grid-template-areas - Named grid areas
gap - Space between grid items
grid-column - Item column placement
grid-row - Item row placement

💡 Best Practice: Use fr units for flexible grid tracks. 1fr means "one fraction of available space".

🛠️ Practical Examples

CSS Example

/* Grid Container */
.grid-container-demo {
  display: grid;
  background: #f1f2f6;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  gap: 10px;
}

/* Grid Items */
.grid-item-demo {
  background: #9b59b6;
  color: white;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
}

/* Basic Grid Template */
.grid-3x2 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

/* Grid Areas Layout */
.grid-areas-layout {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  height: 300px;
}

.header-area { grid-area: header; background: #3498db; }
.sidebar-area { grid-area: sidebar; background: #2ecc71; }
.main-area { grid-area: main; background: #e74c3c; }
.aside-area { grid-area: aside; background: #f39c12; }
.footer-area { grid-area: footer; background: #34495e; }

/* Responsive Grid */
.responsive-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Grid Placement */
.item-span-2 {
  grid-column: span 2;
  background: #e67e22;
}

.item-start-2 {
  grid-column-start: 2;
  background: #1abc9c;
}

/* Grid Alignment */
.grid-align-center {
  align-items: center;
  justify-items: center;
  height: 150px;
}

5. Z-index & Stacking Context

📚 Theory Overview

z-index controls the stacking order of positioned elements along the z-axis (depth).

Key Points:

Only works on positioned elements (position: relative/absolute/fixed/sticky)
Higher values appear in front of lower values
Default value is auto (equivalent to 0)
Negative values place elements behind their stacking context

Stacking Context Rules:

Root element (html) creates the root stacking context
Positioned elements with z-index ≠ auto create new stacking contexts
Elements are stacked within their parent stacking context
Stacking order (from back to front):
1. Background and borders of root element
2. Non-positioned, non-floating block elements
3. Non-positioned floating elements
4. Inline elements
5. Positioned elements (z-index: auto or 0)
6. Positioned elements with positive z-index

⚠️ Common Issue: z-index only works within the same stacking context. A child element cannot be positioned behind its parent's background.

🛠️ Practical Examples

CSS Example

/* Stacking Container */
.stacking-context {
  position: relative;
  height: 250px;
  background: #ecf0f1;
  border: 2px solid #bdc3c7;
  margin: 20px 0;
}

/* Stacked Layers */
.layer {
  position: absolute;
  width: 140px;
  height: 90px;
  padding: 20px;
  color: white;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
}

.layer-base {
  background: rgba(52, 152, 219, 0.9);
  top: 30px;
  left: 30px;
  z-index: 1;
}

.layer-middle {
  background: rgba(46, 204, 113, 0.9);
  top: 60px;
  left: 60px;
  z-index: 2;
}

.layer-top {
  background: rgba(231, 76, 60, 0.9);
  top: 90px;
  left: 90px;
  z-index: 3;
}

.layer-behind {
  background: rgba(243, 156, 18, 0.9);
  top: 120px;
  left: 120px;
  z-index: -1;
}

/* Nested Stacking Context */
.nested-context {
  position: relative;
  z-index: 10;
  background: rgba(155, 89, 182, 0.7);
  padding: 15px;
  border-radius: 4px;
}

.nested-child {
  position: relative;
  background: rgba(41, 128, 185, 0.9);
  padding: 10px;
  margin-top: 10px;
  z-index: 5;
}

.overlap-box {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(22, 160, 133, 0.9);
  padding: 15px;
  z-index: 15;
}

6. Float & Clear (Legacy Layout)

📚 Theory Overview

The float property was originally designed for wrapping text around images but was later (mis)used for creating layouts before Flexbox and Grid.

Float Values:

left - Element floats to left, content wraps around right
right - Element floats to right, content wraps around left
none - Default, element doesn't float
inherit - Inherits float value from parent

Clear Property:

The clear property controls how elements behave when they're next to floated elements:

none - Default, element can be next to floated elements
left - Element moved below left-floated elements
right - Element moved below right-floated elements
both - Element moved below both left and right floated elements

The Clearfix Hack:

Since floated elements are removed from normal flow, containers collapse. The clearfix fixes this:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

💡 Modern Alternative: For layouts, use Flexbox or Grid instead of float. Float should only be used for its original purpose: wrapping text around images.

🛠️ Practical Examples

CSS Example

/* Float examples */
.float-demo-container {
  width: 100%;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
}

.float-left-demo {
  float: left;
  width: 120px;
  height: 120px;
  background: #3498db;
  color: white;
  margin: 0 15px 15px 0;
  padding: 15px;
  border-radius: 4px;
}

.float-right-demo {
  float: right;
  width: 120px;
  height: 120px;
  background: #e74c3c;
  color: white;
  margin: 0 0 15px 15px;
  padding: 15px;
  border-radius: 4px;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Clear examples */
.clear-left-demo {
  clear: left;
  background: #f1c40f;
  padding: 10px;
  margin: 10px 0;
}

.clear-right-demo {
  clear: right;
  background: #2ecc71;
  padding: 10px;
  margin: 10px 0;
}

.clear-both-demo {
  clear: both;
  background: #9b59b6;
  padding: 10px;
  margin: 10px 0;
  color: white;
}

/* Content styling */
.float-content {
  line-height: 1.6;
  text-align: justify;
}

Conclusion

🎯 Key Takeaways

Display Property determines how elements participate in layout flow
Position Property controls element positioning relative to different reference points
Flexbox is ideal for one-dimensional layouts (rows OR columns)
CSS Grid excels at two-dimensional layouts (rows AND columns)
Z-index controls stacking order within positioning contexts
Float & Clear are legacy techniques; use modern layout methods for new projects

📋 When to Use What

Layout Need	Recommended Approach
Simple component alignment	Flexbox
Complex page layouts	CSS Grid
Overlapping elements	Position + Z-index
Text wrapping around images	Float (when appropriate)
Sticky headers/footers	Position: sticky

🚀 Next Steps

Practice combining these techniques to create responsive, accessible layouts. Remember to test across different browsers and devices.

← CSS Box Model CSS Flexbox →

CSS Tutorial

CSS Display & Positioning

Table of Contents

1. Display Property Basics

📚 Theory Overview

Key Display Values:

🛠️ Practical Examples

2. CSS Positioning

📚 Theory Overview

Position Values:

🛠️ Practical Examples

3. Flexbox Layout System

📚 Theory Overview

Key Concepts:

Container Properties:

Item Properties:

🛠️ Practical Examples

4. CSS Grid Layout

📚 Theory Overview

Key Concepts:

Essential Properties:

🛠️ Practical Examples

5. Z-index & Stacking Context

📚 Theory Overview

Key Points:

Stacking Context Rules:

🛠️ Practical Examples

6. Float & Clear (Legacy Layout)

📚 Theory Overview

Float Values:

Clear Property:

The Clearfix Hack:

🛠️ Practical Examples

Conclusion

🎯 Key Takeaways

📋 When to Use What

🚀 Next Steps

Follow Us

Our Tools

Our Company

Special Tools