Display and Positioning Properties

Module 5: CSS Fundamentals - Thursday Lecture 1

Introduction to CSS Layout

Welcome to our exploration of CSS layout fundamentals! Today, we'll dive into the core display and positioning properties that form the foundation of every web layout you'll create.

One way to think about web layout is like arranging furniture in a room. You need to decide:

Just as interior designers use different techniques to arrange a room, web developers use CSS display and positioning properties to create visually appealing and functional layouts.

The Display Property

The display property is arguably the most important CSS property for controlling layout. It determines how an element behaves in the document flow and in relation to other elements.

graph TD A[display property] --> B[Block] A --> C[Inline] A --> D[Inline-block] A --> E[None] A --> F[Flex] A --> G[Grid] A --> H[Table-related] B --> B1[Takes full width] B --> B2[Creates line breaks] B --> B3[Height/width respected] C --> C1[Flows with text] C --> C2[No line breaks] C --> C3[Height/width ignored] D --> D1[Flows with text] D --> D2[No line breaks] D --> D3[Height/width respected] E --> E1[Removes from document] E --> E2[Space not reserved] F --> F1[Flexbox layout model] G --> G1[Grid layout model] H --> H1[Table layout behavior]

Basic Display Values

block

display: block;

Block elements:

  • Start on a new line
  • Take up the full width available by default
  • Respect height and width properties
  • Examples: <div>, <p>, <h1>, <section>
This is a block element. It takes up the full width and creates a new line before and after.
Another block element. Notice how they stack vertically.

inline

display: inline;

Inline elements:

  • Flow with text content
  • Do not start on a new line
  • Only take up as much width as necessary
  • Ignore height and width properties
  • Ignore top and bottom margin settings
  • Examples: <span>, <a>, <strong>, <em>

This paragraph contains inline elements that flow with the text and don't create line breaks.

inline-block

display: inline-block;

Inline-block elements:

  • Flow with text like inline elements
  • Respect height and width properties like block elements
  • Can have margins and paddings on all sides
  • Perfect for creating grid-like layouts without actually using CSS Grid

These are inline-block elements with specific dimensions.

none

display: none;

Elements with display: none:

  • Are completely removed from the document flow
  • Do not take up any space
  • Are not visible and not accessible to screen readers
  • Different from visibility: hidden which hides the element but keeps its space

The element below has display: none and is completely hidden:

This text is not visible at all.

Notice there's no space reserved for it.

Other Important Display Values

flex

display: flex;

Enables the Flexbox layout mode for the container. We'll cover Flexbox in detail in a future module, but it's a powerful layout tool for one-dimensional layouts (either rows or columns).

Flex item 1
Flex item 2
Flex item 3

grid

display: grid;

Enables the Grid layout mode for the container. CSS Grid is excellent for two-dimensional layouts (rows and columns simultaneously). We'll cover Grid in detail in a future module.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

Table-related values

display: table;
display: table-row;
display: table-cell;

These values make elements behave like HTML table elements, without actually using <table> markup. This can be useful for creating table-like layouts when semantic tables aren't appropriate.

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

Changing Display Types

/* Making inline elements behave like blocks */
span.special {
  display: block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

/* Making block elements behave like inline */
p.inline-paragraph {
  display: inline;
  margin: 0;
  padding: 5px;
  background-color: lightyellow;
}

/* Creating a horizontal navigation menu with inline-block */
nav.horizontal-menu a {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
}

Real-World Applications

  • Navigation menus: Often use inline-block or flex to create horizontal navigation
  • Form controls: Might use block to stack vertically or inline-block for side-by-side arrangement
  • Responsive layouts: May change display properties at different breakpoints (e.g., block on mobile, inline-block on desktop)
  • Toggling visibility: Using display: none and JavaScript to show/hide elements based on user interaction
  • Grid systems: Pre-flexbox/grid layouts often used inline-block with percentage widths to create column systems

CSS Positioning

While the display property determines how elements flow in relation to content, the position property controls how elements are positioned in the document.

graph TD A[position property] --> B[static] A --> C[relative] A --> D[absolute] A --> E[fixed] A --> F[sticky] B --> B1[Default flow] B --> B2[Top/right/bottom/left ignored] C --> C1[Relative to normal position] C --> C2[Keeps space in flow] C --> C3[Creates positioning context] D --> D1[Removed from flow] D --> D2[Positioned relative to nearest positioned ancestor] E --> E1[Removed from flow] E --> E2[Positioned relative to viewport] F --> F1[Like relative within flow] F --> F2[Like fixed when scrolled]

Position Values

static

position: static;

This is the default positioning for all elements. Elements with static positioning:

  • Follow the normal document flow
  • Are not affected by the top, right, bottom, left, or z-index properties
  • Cannot be manually positioned
This is a statically positioned element — the default.

relative

position: relative;

Elements with relative positioning:

  • Are positioned relative to their normal position in the document flow
  • Still take up space in their original position
  • Can be moved using top, right, bottom, left properties
  • Create a positioning context for absolutely positioned children
This element is positioned relative to its normal position (shifted 30px left and 15px down).
Notice the space where the relative element would normally be is preserved.

absolute

position: absolute;

Elements with absolute positioning:

  • Are removed completely from the normal document flow
  • Do not take up space in the layout
  • Are positioned relative to the nearest positioned ancestor (any non-static parent)
  • If no positioned ancestor exists, they position relative to the initial containing block (usually the viewport)
  • Can be placed precisely using top, right, bottom, left properties
Normal content in the container.
Absolutely positioned element.

fixed

position: fixed;

Elements with fixed positioning:

  • Are removed completely from the normal document flow
  • Are positioned relative to the viewport (browser window)
  • Stay fixed even when the page is scrolled
  • Common use cases: headers, navigation bars, chat widgets, back-to-top buttons

Fixed positioning example: Imagine a navigation bar that stays at the top of the screen as you scroll down the page.

This simulates a fixed header inside a scrollable container.
Scroll up and down to see the fixed header in action.

More content...

More content...

More content...

sticky

position: sticky;

Elements with sticky positioning:

  • Are a hybrid of relative and fixed positioning
  • Act like relatively positioned elements until they cross a specified threshold
  • Then act like fixed elements, staying visible as the user scrolls
  • Common use cases: section headers in long lists, persistent navigation elements
Section introduction...
This is a sticky header for Section 1
Content for section 1...
This is a sticky header for Section 2
Content for section 2...
This is a sticky header for Section 3
Content for section 3...

Scroll the box above to see sticky positioning in action. Each section header sticks to the top as you scroll past it.

Offset Properties

When you use any positioning value other than static, you can control the positioning with these four properties:

  • top: Distance from the top edge of the containing element
  • right: Distance from the right edge of the containing element
  • bottom: Distance from the bottom edge of the containing element
  • left: Distance from the left edge of the containing element
/* Basic positioning */
.element {
  position: absolute;
  top: 20px;
  left: 30px;
}

/* Positioning from right and bottom */
.corner-element {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* Centering an element absolutely */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full overlay */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
top: 20px; left: 30px;
bottom: 10px; right: 10px;
Centered with transform

Stacking with z-index

The z-index property controls the vertical stacking order of elements that overlap. Elements with higher z-index values appear on top of elements with lower values.

  • z-index only works on positioned elements (not static)
  • Higher values appear in front of lower values
  • Can use positive or negative integers
  • Default value is auto (treated as 0)
  • Creates "stacking contexts" - z-index values only compete within the same stacking context
/* Basic z-index usage */
.back-element {
  position: absolute;
  z-index: 1;
}

.front-element {
  position: absolute;
  z-index: 2; /* Will appear above .back-element */
}

/* Creating a modal overlay */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1001; /* Above the backdrop */
}
z-index: 1
z-index: 2
z-index: 3

Real-World Applications of Positioning

  • Modal dialogs: Using fixed positioning with high z-index to overlay content
  • Dropdown menus: Using absolute positioning relative to a navigation item
  • Tooltips and popovers: absolute positioning to show information near an element
  • Sticky headers/footers: Using fixed or sticky positioning to keep navigation visible
  • Badges and notifications: Small elements absolutely positioned in the corner of an icon or button
  • Media overlays: Text or controls positioned absolutely over images or videos
  • Multi-layer interfaces: Using z-index to manage complex overlapping UI components

Common Layout Patterns

Let's look at some common layout patterns you can create using display and positioning properties:

Centering Elements

Horizontally Centering

/* For block elements */
.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* Must have a width */
}

/* For text content */
.center-text {
  text-align: center;
}

/* For inline/inline-block elements */
.center-inline {
  text-align: center; /* Applied to the parent */
}

Vertically Centering

/* Single line of text */
.center-text-vertically {
  height: 100px;
  line-height: 100px; /* Same as height */
}

/* Absolute positioning method */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Using flexbox (modern approach) */
.center-flex {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  height: 200px;
}
Horizontally centered with margin: auto
Centered with absolute positioning
Centered with flexbox

Overlays and Cards

/* Image with text overlay */
.image-container {
  position: relative;
  display: inline-block;
}

.overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
}

/* Card with corner badge */
.card {
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
Image placeholder
Overlay Caption
3
Card with badge

Multi-column Layout

/* Simple two-column layout with inline-block */
.column {
  display: inline-block;
  width: 49%; /* Slightly less than 50% to account for whitespace */
  vertical-align: top;
}

/* Three-column layout with floats */
.float-container::after {
  content: "";
  display: table;
  clear: both;
}

.float-column {
  float: left;
  width: 33.33%;
}

/* Better approach with flexbox */
.flex-container {
  display: flex;
}

.flex-column {
  flex: 1; /* Equal width */
}
Column 1 with inline-block
Column 2 with inline-block
Flex column 1
Flex column 2
Flex column 3

Common Challenges and Solutions

Containing Floated Elements (Clearfix)

Problem: When elements are floated, their container doesn't recognize their height, potentially causing layout issues. 

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

/* Modern alternative */
.container {
  display: flow-root; /* Creates a block formatting context */
}
Floated
Floated

Container collapsed without clearfix, leading to this text overlapping. The clear: both on this paragraph fixes it in this case.

Floated
Floated

Container with display: flow-root properly contains the floated elements.

Collapsing Margins

Problem: Vertical margins of block elements can collapse (merge), sometimes causing unexpected spacing. 

/* Solutions to prevent margin collapsing */

/* Option 1: Add a border or padding */
.prevent-collapse-1 {
  border-top: 1px solid transparent;
  /* or */
  padding-top: 1px;
}

/* Option 2: Use display: flow-root or overflow */
.prevent-collapse-2 {
  display: flow-root;
  /* or */
  overflow: auto;
}

/* Option 3: Use flexbox (for parent-child collapsing) */
.flex-container {
  display: flex;
  flex-direction: column;
}
Element with margin-bottom: 20px
Element with margin-top: 20px

Note: The space between these elements is 20px, not 40px, due to margin collapsing.

Horizontal and Vertical Centering

Problem: Centering elements both horizontally and vertically has historically been tricky. 

/* Old school solution (before flexbox) */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Modern solution with flexbox */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Need a height */
}

/* Alternative with CSS Grid */
.center-grid {
  display: grid;
  place-items: center;
  height: 200px; /* Need a height */
}

Best Practices and Tips

  • Choose the right display property for the job:
    • Use block for full-width elements that stack vertically
    • Use inline for text-level elements
    • Use inline-block when you need elements to flow like text but with height/width
    • Use flex or grid for complex layouts (we'll cover these in-depth later)
  • Use positioning judiciously:
    • Rely on the normal document flow when possible (easier to maintain)
    • Use relative positioning for minor adjustments or to establish a positioning context
    • Use absolute positioning for elements that need to be placed precisely relative to a container
    • Reserve fixed positioning for elements that should stay in place during scrolling
  • Manage z-index values systematically:
    • Use a numbering system or variables for z-index values
    • Keep z-index values as low as possible
    • Be aware of stacking contexts that limit the effect of z-index
  • Avoid common pitfalls:
    • Be cautious with position: fixed in mobile layouts
    • Remember that position: absolute is relative to the nearest positioned ancestor, not just any parent
    • Consider what happens when content overflows its container
    • Test layouts with different content lengths
  • Modern vs. legacy approaches:
    • Prefer flexbox and grid for new projects
    • Understand older techniques (floats, display: table) for maintaining legacy code
    • Use feature detection or @supports when implementing cutting-edge properties

Practice Exercises

Exercise 1: Display Property Exploration

Create a webpage that demonstrates the differences between the following display values:

  • block
  • inline
  • inline-block
  • none

For each value, create multiple elements and demonstrate how they behave in the document flow. Add styles such as margins, paddings, borders, and dimensions to illustrate how these properties are affected by different display values.

Exercise 2: Positioning Challenge

Create a page with the following elements:

  1. A 500px × 500px container with a border and relative positioning
  2. Four 100px × 100px colored squares positioned in each corner of the container
  3. A circle in the center of the container
  4. A navigation bar fixed to the top of the viewport
  5. A "back to top" button fixed to the bottom right corner
  6. Section headers that become sticky when scrolling

Use different positioning techniques for each element as appropriate.

Exercise 3: Build a Card Component

Create a product card component that includes:

  • A product image
  • A sale badge absolutely positioned in the corner
  • Product title and description
  • Price and "Add to Cart" button

Then, create a grid of these cards using appropriate display properties to arrange them in rows. The grid should be responsive—adjust the number of cards per row based on screen width.

Exercise 4: Layout Recreation

Recreate the layout of a popular website's homepage (e.g., a news site, e-commerce site, or social media platform) using only the positioning and display techniques we've learned today. Focus on the structure and positioning—you don't need to match the exact styles or content.

Analyze how different sections are positioned and arranged, and implement your solution. Remember to make it responsive!

Summary and Key Takeaways

  • The display property controls how elements behave in the document flow and interact with surrounding elements
  • Common display values include block, inline, inline-block, none, flex, and grid
  • The position property determines how elements are positioned in the document
  • Position values include static, relative, absolute, fixed, and sticky
  • Offset properties (top, right, bottom, left) and z-index work with positioned elements
  • Common layout patterns can be created by combining display and positioning properties
  • Modern CSS (flexbox and grid) offers more powerful layout tools that we'll explore in future modules

Further Learning