Skip to content
Home Tutorials Roadmaps Courses
Log in Join free
Tutorials CSS Display & Positioning
Introduction to CSS
What is CSS? CSS Selectors
Colors & Backgrounds
CSS Colors Backgrounds
Text & Fonts
Text Styling Web Fonts
Box Model
The Box Model Display & Positioning
Layout
Flexbox CSS Grid
Responsive Design
Media Queries Units & Sizing
Animations & Effects
Transitions & Transforms CSS Animations
Advanced CSS
Pseudo-classes & Pseudo-elements CSS Variables & Best Practices
CSS Beginner FREE

Display & Positioning

Lesson 2 of 16 Beginner Interactive

The display and position properties control how elements are rendered and placed on the page.

Display Values

  • block — full width, starts on new line (div, p, h1)
  • inline — only takes needed width, stays in flow (span, a)
  • inline-block — inline flow but accepts width/height/padding
  • none — removes element from layout entirely
  • flex — enables flexbox layout
  • grid — enables grid layout

Position Values

  • static — default, normal flow
  • relative — positioned relative to its normal position
  • absolute — positioned relative to nearest positioned ancestor
  • fixed — positioned relative to viewport (stays on scroll)
  • sticky — hybrid of relative and fixed

Syntax

CSS 
/* Display */
.box { display: block; }
.span { display: inline-block; width: 100px; height: 100px; }
.hidden { display: none; }

/* Position */
.parent { position: relative; }
.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Fixed Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Sticky Section Title */
.section-title {
    position: sticky;
    top: 0;
    background: white;
}
Display and Positioning
HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Display & Positioning</title>
    <style>
        .inline-demo span { display: inline; background: #e0e0e0; }
        .block-demo div { display: block; background: #d0d0d0; padding: 10px; margin: 5px 0; }
        .flex-demo { display: flex; gap: 10px; }
        .flex-demo div { background: #aec6ff; padding: 10px; }
        .wrapper { position: relative; border: 1px dashed #999; height: 90px; }
        .absolute-box { position: absolute; top: 0; right: 0; background: #ffd6a5; padding: 6px; }
        .fixed-box { position: fixed; bottom: 20px; right: 20px; background: #b5ead7; padding: 8px; z-index: 100; }
    </style>
</head>
<body>
    <div class="inline-demo"><span>inline</span> <span>inline</span></div>
    <div class="block-demo"><div>block 1</div><div>block 2</div></div>
    <div class="flex-demo"><div>flex item</div><div>flex item</div></div>
    <div class="wrapper">Wrapper:<div class="absolute-box">position: absolute (top: 0, right: 0)</div></div>
    <div class="fixed-box">position: fixed</div>
</body>
</html>
Try It Yourself

Practice

1
Exercise

Create a fixed navigation bar at the top of the page that stays visible when scrolling.

Answer 
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #1e3a8a;
    z-index: 1000;
}
2
Exercise

Position a badge at the top-right corner of a card using absolute positioning.

Answer 
.card { position: relative; }
.badge {
    position: absolute;
    top: -10px;
    right: -10px;
}

Quick Quiz

1

Which display value removes an element from the layout entirely?

display: none removes the element from the document flow completely.

2

What does position: sticky do?

Sticky elements switch between relative and fixed positioning based on scroll position.

Interview Questions

visibility: hidden hides the element but it still takes up space in the layout. display: none removes the element entirely — it takes no space and other elements fill the gap. Use display: none when you want to toggle element visibility without leaving blank space.

Use position: fixed for elements that should always be visible (headers, floating buttons). Use position: sticky for elements that should stick only when they reach a certain scroll point (section titles, table headers). Sticky elements remain in the document flow until they "stick."

Previous
The Box Model
Tutorial Complete
Back to CSS