CSS Display & Position Tutorial: 7 Essential Concepts

Welcome to this CSS display position tutorial. These two properties control how elements behave on a page and exactly where they sit — arguably the most important layout concepts before you move on to Flexbox and Grid.

This is Tutorial 5 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 4: Backgrounds, Borders & Box Shadows first.

The display Property

Every HTML element has a default display value, and understanding it is the starting point of any CSS display position tutorial.

div {
    display: block;
}

span {
    display: inline;
}

.box {
    display: inline-block;
}

A common beginner mistake is trying to set width and height on an inline element — it simply won’t work, since inline elements ignore those properties entirely.

Hiding Elements: display: none vs visibility: hidden

Both hide an element, but they behave differently — a distinction every CSS display position tutorial needs to clarify.

.hidden-1 {
    display: none;
}

.hidden-2 {
    visibility: hidden;
}

display: none removes the element entirely, and other elements shift to fill the empty space. visibility: hidden hides the element visually, but it still takes up its original space on the page.

The position Property: Static & Relative

.default-box {
    position: static;
}

.shifted-box {
    position: relative;
    top: 10px;
    left: 20px;
}

• static — the default value. Elements follow normal document flow, top/left/right/bottom have no effect
• relative — the element stays in normal flow, but you can shift it visually using top/left/right/bottom, relative to its own original position

Absolute & Fixed Positioning

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Key rule: An absolutely positioned element looks for the closest parent with position: relative (or absolute/fixed). If none exists, it positions itself relative to the entire page. This single rule solves most positioning confusion in any CSS display position tutorial.

Sticky Positioning

.sticky-nav {
    position: sticky;
    top: 0;
}

position: sticky is a hybrid — the element behaves like relative until the page scrolls to a certain point, then it “sticks” like fixed. This is the exact technique behind sticky navigation bars that stay visible while scrolling.

For the full official reference, check the MDN documentation on the position property.

Stacking Order with z-index

.back-layer {
    position: absolute;
    z-index: 1;
}

.front-layer {
    position: absolute;
    z-index: 10;
}

When positioned elements overlap, z-index decides which one appears on top — higher values sit above lower ones. Note that z-index only works on elements with a position value other than static.

Practice Exercise

Open the style.css file from Tutorial 4 and expand it with display and position rules.

Requirements:

1. Create a navigation bar using display: inline-block on each nav link
2. Make a “badge” element positioned absolutely inside a relatively positioned card
3. Create a floating “Back to Top” button using position: fixed in the bottom-right corner
4. Make your header sticky using position: sticky so it stays visible while scrolling
5. Use z-index to make sure your floating button always appears above other content

Bonus challenge: Toggle one element’s visibility using display: none and visibility: hidden separately, and compare how the layout shifts differently in each case.

Save your file, refresh your browser, and scroll around to test your sticky and fixed elements in action.

What’s Next?

This completes Tutorial 5 of our CSS display position tutorial series. In Tutorial 6, we’ll cover Flexbox — one of the most powerful and widely used layout tools in modern CSS.

This CSS display position tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.