Display, Position & Z-Index

🎨 CSS Layout Lesson 7 Intermediate

Understanding display and position is essential for controlling exactly where elements appear on the page. These two properties form the foundation of CSS layout.

1 Display Values

CSS — Display Values

display: block;         /* full-width, stacks vertically   */
display: inline;        /* flows with text, no width/height */
display: inline-block;  /* inline flow + width/height       */
display: flex;          /* flexbox container                */
display: grid;          /* grid container                   */
display: none;          /* removes from layout entirely     */

2 Position Values

CSS — Position Values

/* static — default, ignores top/left/right/bottom */
position: static;

/* relative — offset from its normal position */
position: relative;
top: 10px; left: 20px;

/* absolute — removed from flow, positioned inside nearest
   non-static ancestor */
.parent { position: relative; }
.badge  { position: absolute; top: 8px; right: 8px; }

/* fixed — stays in viewport while scrolling */
.navbar { position: fixed; top: 0; width: 100%; z-index: 100; }

/* sticky — scrolls normally until threshold, then sticks */
.sidebar { position: sticky; top: 20px; }

3 Z-Index & Stacking Context

CSS — Z-Index

.modal-overlay { z-index: 1000; position: fixed; }
.modal-box     { z-index: 1001; position: relative; }
.tooltip       { z-index: 500;  position: absolute; }

Important: z-index only works on elements with a position other than static.

4 Code Challenge

Challenge: Build a card with a badge (e.g. "NEW") pinned to the top-right corner using position: absolute inside a position: relative card wrapper.