Skip to content
Chapter 03 of 07 · 2 lessons · ~18 min

Layout Basics

Learn how elements flow on the page with the display property, and how to move them anywhere with position: relative, absolute, fixed and sticky.

YOUR PROGRESS0%
/ Lessons in this chapter
08
CSS Display: Block, Inline and Inline-Block How the display property controls the way elements sit on the page, and when to switch it. Coming soon
09
CSS Position: Relative, Absolute, Fixed and Sticky How to place elements exactly where you want with relative, absolute, fixed and sticky positioning, and how z-index decides what's on top. Coming soon

Chapter practice task

Task: Build a sticky header with a badge on your logo

  1. Make your header stick to the top while the page scrolls with position: sticky.
  2. Turn your navigation links into inline-block “pills” with padding.
  3. Add a small “Available” badge to the corner of your logo with position: absolute.
  4. Add a “Back to top” button fixed to the bottom-right corner.
  5. Test on a phone-sized screen and make sure nothing covers your content.

By the end of this chapter

  • You know the difference between block, inline and inline-block elements
  • You can hide elements correctly with display: none
  • You can use relative, absolute, fixed and sticky positioning without breaking your layout

Quick answers for this chapter

Why won’t my span accept a width?

Spans are inline elements. Change them to display: inline-block or block.

Should I build layouts with position absolute?

No. Use Flexbox and Grid for layouts; use positioning for small overlays like badges and tooltips.

What does z-index do?

It decides which positioned element appears on top when they overlap.