CSS Display, Positioning and Overflow

Introduction

CSS does more than change colors, fonts, and spacing. It also controls
how elements participate in a webpage layout, where they are
positioned, how they overlap, and what happens when their content becomes
larger than the space available.

In this lesson, you will learn four important areas of CSS layout:

• Display — controls how an element behaves in the layout.
• Positioning — controls where an element is placed.
• Z-index — controls which positioned elements appear in front.
• Overflow — controls what happens when content exceeds its container.

1. Understanding the CSS Display Property

Every HTML element has a default display behavior. CSS allows you to change
that behavior with the display property.

The most commonly used values include:

• block
• inline
• inline-block
• none
• flex
• grid

Block Elements

A block-level element normally starts on a new line and can take available
horizontal space.

div {
    display: block;
}

Common block-level elements include:

• <div>
• <p>
• <h1> through <h6>
• <section>
• <header>
• <footer>

Inline Elements

Inline elements normally remain within the same line and only use as much
horizontal space as their content requires.

a {
    display: inline;
}

Common inline elements include:

• <span>
• <a>
• <strong>
• <em>

Inline-Block

The inline-block value combines characteristics of inline and
block elements. Elements can remain on the same line while still accepting
width, height, padding, and other box-model properties.

.card {
    display: inline-block;
    width: 200px;
    padding: 20px;
}

2. Display None

The value display: none completely removes an element from the
normal document layout.

.hidden {
    display: none;
}

The browser behaves as though the element is not occupying space in the
layout.

This is commonly useful for:

• Mobile navigation menus.
• Dropdown menus.
• Modal windows.
• Conditional interface elements.
• Interactive components controlled with JavaScript.

3. Display None vs Visibility Hidden

It is important to understand the difference between
display: none and visibility: hidden.

.removed {
    display: none;
}

.invisible {
    visibility: hidden;
}

With display: none, the element is removed from the layout.

With visibility: hidden, the element becomes invisible but its
layout space remains.

4. Understanding Opacity

The opacity property controls transparency.

.transparent {
    opacity: 0;
}

An element with opacity: 0 can still occupy space in the layout.
It is therefore different from display: none.

Opacity can contain values between 0 and 1.

.half-transparent {
    opacity: 0.5;
}

.fully-visible {
    opacity: 1;
}

5. CSS Positioning

The position property determines how an element is positioned in
relation to the document or another containing element.

The major values are:

• static
• relative
• absolute
• fixed
• sticky

6. Position Static

The default position value for most elements is static.

.box {
    position: static;
}

Static elements follow the normal document flow. The
top, right, bottom, and
left properties do not normally move a statically positioned
element.

7. Position Relative

The relative value keeps an element in the normal document flow
while allowing it to be visually moved from its original position.

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

The original space occupied by the element is still preserved.

Relative positioning is also extremely important because it can establish a
positioning context for absolutely positioned child elements.

8. Position Absolute

An absolutely positioned element is removed from the normal document flow.
It can be positioned using top, right,
bottom, and left.

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

An absolutely positioned element is normally positioned relative to its
nearest positioned ancestor.

For example:

.card {
    position: relative;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

Here, the card becomes the positioning reference for the badge.

9. Position Fixed

A fixed element is positioned relative to the viewport and generally remains
in the same place while the page scrolls.

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

Fixed positioning is commonly used for:

• Floating action buttons.
• Support buttons.
• Back-to-top buttons.
• Persistent navigation elements.

10. Position Sticky

The sticky value combines characteristics of relative and fixed
positioning.

.header {
    position: sticky;
    top: 0;
}

A sticky element behaves normally until a specified scroll position is
reached. It can then remain attached to the specified edge of its scrolling
container.

Sticky positioning is commonly used for navigation bars, section headings,
and table headers.

11. Top, Right, Bottom and Left

Positioned elements can be moved using four directional properties:

• top
• right
• bottom
• left

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

These properties work with positioned elements such as
relative, absolute, fixed, and
sticky.

12. Understanding Z-Index

When positioned elements overlap, CSS needs a way to determine which element
should appear in front.

The z-index property controls stacking order.

.front {
    position: relative;
    z-index: 10;
}

.back {
    position: relative;
    z-index: 1;
}

The element with the higher stacking level will generally appear above an
element with a lower stacking level when both participate in the same
stacking context.

For example, a modal interface may use a high z-index so that it
appears above the page content.

13. Understanding Overflow

The overflow property controls what happens when content is
larger than the dimensions of its container.

The most common values are:

• visible
• hidden
• scroll
• auto

Overflow Visible

.box {
    overflow: visible;
}

This is the default behavior in many situations. Content may extend outside
the boundaries of the container.

Overflow Hidden

.box {
    overflow: hidden;
}

Extra content that extends outside the box is clipped.

Overflow Scroll

.box {
    overflow: scroll;
}

Scrollbars are provided so the user can access content that does not fit.

Overflow Auto

.box {
    overflow: auto;
}

The browser provides scrolling when it is needed.

14. Overflow on Individual Axes

You can control horizontal and vertical overflow separately.

.container {
    overflow-x: auto;
    overflow-y: hidden;
}

This is useful for responsive tables, horizontal navigation, code editors,
and other content that may become wider than the viewport.

15. Practical Example

The following example combines display, positioning, z-index, sticky
positioning, fixed positioning, and overflow into a small webpage interface.

Study the code carefully and identify how each CSS property affects the
layout.

16. Using Display and Positioning Together

Modern websites frequently combine multiple CSS properties.
For example, a card can use position: relative while a badge
inside it uses position: absolute.

.course-card {
    position: relative;
    display: inline-block;
}

.course-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

This pattern is extremely common in:

• Course cards.
• Product cards.
• Blog cards.
• Profile cards.
• Notification badges.
• Image overlays.

17. Common Mistakes

Mistake 1: Using Absolute Positioning Everywhere

Absolute positioning should not normally be used to create an entire page
layout. It can make responsive design difficult.

Use modern layout systems such as Flexbox and CSS Grid for major page
structures.

Mistake 2: Forgetting the Relative Parent

When using an absolutely positioned child, developers often forget to make
the intended parent a positioned element.

.parent {
    position: relative;
}

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

Mistake 3: Excessive Z-Index Values

Using values such as 999999 everywhere does not automatically
solve stacking problems. Developers should understand stacking contexts and
use sensible values.

Mistake 4: Hiding Content Without Testing Accessibility

Using display: none, opacity, or visibility should be done
carefully, especially for navigation and interactive content.

18. Responsive Design Considerations

Positioning that works perfectly on a large desktop screen may create
problems on smaller screens.

Always test positioned elements at different viewport widths.

For example:

@media (max-width: 768px) {
    .floating-card {
        position: static;
        width: 100%;
    }
}

Responsive CSS often requires changing positioning or dimensions at smaller
breakpoints.

19. Developer Tools

Browser Developer Tools are extremely useful when debugging display and
positioning problems.

You can inspect an element and experiment with:

• display
• position
• top
• right
• bottom
• left
• z-index
• overflow

Changing these values directly inside Developer Tools allows you to test a
solution before placing the final CSS into your stylesheet.

20. Practical Web Development Challenge

Create a course card with the following requirements:

1. The card must have a fixed width on desktop.
2. The card must use position: relative.
3. Add a small “NEW” badge in the top-right corner.
4. The badge must use position: absolute.
5. Add a button that remains visible near the bottom-right of the screen using fixed positioning.
6. Create a content area with limited height.
7. Use overflow: auto so additional content can be scrolled.
8. Use z-index to ensure the badge appears above the card content.
9. Make the card responsive on smaller screens.

Conclusion

The CSS display, position, z-index,
and overflow properties are essential tools for controlling
modern website layouts.

Understanding these properties gives you much greater control over how
elements behave on desktop and mobile devices.

As you continue learning CSS, these concepts will become especially
important when working with Flexbox, CSS Grid, responsive layouts,
navigation systems, modals, cards, dashboards, and interactive interfaces.