Webbo3 Frontend Development · Month 1 · Lesson 11

Positioning and Display: Practical Layout Mastery

Positioning and Display: a practical Webbo3 Academy lesson with live code examples, an interactive playground, and a full exercise to complete tonight.

When you start building web pages, getting elements to appear exactly where you want them can feel like a guessing game. You might try using margins to nudge them into place, but that approach is fragile and breaks easily on different screen sizes. Today, we are moving past the theory and diving straight into practical application. You will learn how to place elements precisely, control how they stack, and build real layouts that work.

By the end of this lesson, you will be able to put an element exactly where you want it without relying on trial and error. We will explore the display property, master the different positioning types, and learn the golden rules of z index. We will also build a complete, interactive project together. Type along with every example, because the best way to learn layout is by doing it.

What you need before starting

Your code editor and the project folder from previous lessons. Work along in your own editor as you read. This lesson is written to be typed, not skimmed.

The Display Property in Action

The display property dictates how an element behaves in the layout flow. Block elements take the full width and start on a new line. Inline elements only take the space they need and sit next to other content. Inline block is the best of both worlds: it sits inline but accepts width and height. Let us see this in a live example.

/* Block takes full width and starts on a new line */
.block-element {
  display: block;
  width: 300px;
  background: #e0f2f1;
  margin: 10px 0;
  padding: 10px;
}

/* Inline only takes space needed, ignores width */
.inline-element {
  display: inline;
  background: #fff3e0;
  padding: 5px;
}

/* Inline block sits inline, but accepts width and height */
.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 50px;
  background: #fce4ec;
  margin: 5px;
}

Interactive Positioning Playground

Let us make this interactive. Click the buttons below to see how different position values change the behavior of an element in real time. Watch how the box moves relative to its parent container.

/* CSS for the interactive box */
.playground {
  position: relative; /* Creates a boundary for absolute children */
  height: 220px;
  background: #e0f2f1;
}
.box {
  width: 80px;
  height: 80px;
  background: #0a6e6e;
  transition: all 0.4s;
}

/* JavaScript to change position on click */
function setPosition(pos) {
  box.style.position = pos;
  /* Apply offsets based on the chosen position */
}

The Golden Rule of Absolute Positioning

Absolute positioning removes an element from the normal flow and places it relative to its nearest positioned ancestor. If no ancestor has a position other than static, it escapes to the root document. This is the most common trap for beginners. Always give the parent a position of relative when using absolute on a child.

.card {
  position: relative; /* Crucial: establishes the positioning context */
  width: 300px;
  height: 200px;
  background: #ffffff;
  border: 1px solid #ddd;
}

.badge {
  position: absolute; /* Removed from normal flow */
  top: 10px; /* 10px from the top of .card */
  right: 10px; /* 10px from the right of .card */
  background: #e53935;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 4px;
}

Sticky and Fixed: Pinning Elements

Sticky pins an element when you scroll past it. Fixed pins an element to the viewport permanently. Both are incredibly useful for navigation bars and action buttons. Remember to always add a z index so they stay on top of your content.

.sticky-header {
  position: sticky; /* Sticks when scrolled past */
  top: 0; /* Stick to the top of the viewport */
  z-index: 100; /* Ensure it stays above other content */
  background: #0a2540;
  color: #ffffff;
  padding: 15px;
}

.fixed-button {
  position: fixed; /* Stays in the viewport permanently */
  bottom: 20px;
  right: 20px;
  background: #0a6e6e;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  z-index: 100;
}

Full Practical Exercise

Now it is your turn. Build a complete product card layout featuring a sticky navigation bar, a product card with an absolutely positioned discount badge, and a fixed checkout button. Here is the full code. Study it, type it, and run it.

/* Complete CSS for the exercise */
body { 
  font-family: sans-serif; 
  margin: 0; 
  padding: 0; 
  background: #f4f4f4;
}

/* Sticky navigation at the top */
.nav {
  position: sticky;
  top: 0;
  background: #0a2540;
  color: #fff;
  padding: 15px;
  text-align: center;
  z-index: 10;
}

/* Card container acts as anchor for the badge */
.card {
  position: relative; 
  width: 250px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin: 40px auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Absolute badge pinned to top right of card */
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e53935;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.card-content {
  padding: 20px;
}

/* Fixed checkout button in bottom right */
.checkout-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #0a6e6e;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  z-index: 10;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Common mistakes to avoid

• Forgetting to set the parent element position to relative when using absolute positioning on a child element. The fix is to add position relative to the parent.
• Using display none when you mean to use visibility hidden. Display none removes the element from the layout entirely, while visibility hidden keeps the space but hides the content.
• Forgetting the z index on sticky or fixed elements. Without a high z index, your header or button might slide behind other content when scrolling.
• Overusing absolute positioning for entire page layouts. Absolute positioning is great for overlays and badges, but use flexbox or grid for main page structures.

Next lesson: Flexbox Complete.