Class 030 — Z-Index & Overflow
Modern websites often contain elements that overlap each other or contain more content than their available space.
For example:
- A dropdown menu appears above page content.
- A modal appears above the entire website.
- A badge appears over a product image.
- A sticky header stays above other sections.
- A small container contains more text than it can display.
- A horizontal area needs scrolling.
CSS provides two important concepts for handling these situations:
- z-index
- overflow
z-index controls the stacking order of overlapping elements.
overflow controls what happens when content becomes larger than the available space of an element.
In this class, you will learn:
- What z-index is
- Stacking order
- z-index values
- Positioned elements and z-index
- Stacking context
- Negative z-index
- Practical layering
- What overflow is
- overflow: visible
- overflow: hidden
- overflow: scroll
- overflow: auto
- overflow-x
- overflow-y
- Text overflow
- overflow-wrap
- Single-line ellipsis
- Scrollable containers
- Common z-index and overflow mistakes
LEARNING OBJECTIVES
After completing this class, you will be able to:
- Understand why HTML elements overlap.
- Control stacking order using z-index.
- Understand basic stacking contexts.
- Create layered interface components.
- Keep headers and overlays above other content.
- Understand CSS overflow.
- Hide overflowing content.
- Create scrollable containers.
- Control horizontal and vertical overflow separately.
- Create single-line text ellipsis.
- Handle long words and URLs.
- Debug common z-index and overflow problems.
WHAT IS Z-INDEX?
z-index controls the stacking order of overlapping elements.
Imagine several sheets of paper placed on top of each other.
The element on the higher layer appears in front of the elements below it.
Example:
.box-one {
position: absolute;
z-index: 1;
}
.box-two {
position: absolute;
z-index: 2;
}
If the boxes overlap, box-two will generally appear above box-one within the same stacking context.
BASIC Z-INDEX SYNTAX
selector {
z-index: value;
}
Example:
.header {
position: sticky;
top: 0;
z-index: 100;
}
Z-INDEX VALUES
z-index accepts integer values.
Examples:
z-index: 1;
z-index: 10;
z-index: 100;
z-index: 999;
It can also use:
z-index: 0;
z-index: -1;
z-index: auto;
IMPORTANT:
A larger z-index does not automatically place an element above every element on the entire website.
Stacking contexts also affect the result.
BASIC OVERLAPPING EXAMPLE
HTML:
<div class="box box-one">
Box One
</div>
<div class="box box-two">
Box Two
</div>CSS:
.container {
position: relative;
height: 300px;
}
.box {
position: absolute;
width: 180px;
height: 180px;
padding: 20px;
}
.box-one {
top: 20px;
left: 20px;
background-color: lightblue;
z-index: 1;
}
.box-two {
top: 80px;
left: 80px;
background-color: lightcoral;
z-index: 2;
}
Because the boxes overlap and box-two has the higher z-index within the same stacking context, it appears above box-one.
Z-INDEX AND POSITION
Historically, beginners often learn z-index together with positioned elements.
Example:
.box {
position: relative;
z-index: 10;
}
However, modern CSS also allows z-index to affect certain elements such as Flexbox and Grid items even when position is static.
For now, a useful beginner pattern is:
position: relative;
z-index: 1;
PRACTICAL HEADER EXAMPLE
HTML:
<h1>
My Website
</h1>CSS:
.header {
position: sticky;
top: 0;
z-index: 100;
background-color: white;
}
The z-index helps keep the header above overlapping page content when stacking conditions allow it.
PRODUCT BADGE EXAMPLE
HTML:
<span class="badge">
SALE
</span>
<img
src="product.jpg"
alt="Product"
>CSS:
.product-card {
position: relative;
}
.product-card img {
width: 100%;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
padding: 6px 12px;
background-color: red;
color: white;
}
The badge appears above the product image.
HERO OVERLAY EXAMPLE
HTML:
<div class="overlay"></div>
<div class="hero-content">
<h1>
Learn Web Development
</h1>
<p>
Build professional websites.
</p>
</div>CSS:
.hero {
position: relative;
min-height: 500px;
background-image:
url("hero.jpg");
background-size: cover;
}
.overlay {
position: absolute;
inset: 0;
z-index: 1;
background-color:
rgba(0, 0, 0, 0.6);
}
.hero-content {
position: relative;
z-index: 2;
color: white;
}
Here:
Background image
↓
Overlay
↓
Content
The content appears above the overlay because it has a higher stacking level in this setup.
NEGATIVE Z-INDEX
z-index can use negative values.
Example:
.background-shape {
position: absolute;
z-index: -1;
}
This may place the element behind other content within its stacking context.
Use negative z-index carefully because stacking contexts and ancestor backgrounds can make the element behave differently than expected.
WHAT IS STACKING ORDER?
When elements overlap, the browser needs rules to decide which element is painted above another.
This is called stacking order.
z-index is one important part of this system.
WHAT IS A STACKING CONTEXT?
A stacking context is a local stacking environment.
Elements inside one stacking context are compared within that context.
This means:
z-index: 9999;
does not always guarantee that an element will appear above an element in another higher stacking context.
SIMPLE STACKING CONTEXT PROBLEM
Imagine:
.parent-one {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 9999;
}
.parent-two {
position: relative;
z-index: 2;
}
Even though the child has:
z-index: 9999;
it belongs to parent-one’s stacking context.
parent-one itself is below parent-two.
Therefore, the child cannot simply escape its parent’s stacking context and appear above parent-two.
IMPORTANT LESSON
Do not solve every layering problem by writing:
z-index: 999999999;
First inspect the stacking context.
WHAT CAN CREATE A STACKING CONTEXT?
Several CSS conditions can create stacking contexts.
Common examples include certain uses of:
- Positioned elements with z-index
- position: fixed
- position: sticky
- opacity less than 1
- transform
- filter
There are additional cases in CSS.
At this stage, the important concept is:
Stacking contexts create local layering groups.
OPACITY EXAMPLE
Example:
.parent {
opacity: 0.9;
}
This can create a new stacking context.
A child with a very large z-index may still remain limited by the parent’s stacking context relative to outside elements.
TRANSFORM EXAMPLE
Example:
.card {
transform: translateY(0);
}
A transform value other than none creates a stacking context.
This can sometimes explain unexpected z-index behavior.
PRACTICAL Z-INDEX SCALE
Professional projects often use a deliberate layering system.
Example:
Base content:
z-index: 1;
Sticky header:
z-index: 100;
Dropdown:
z-index: 200;
Overlay:
z-index: 900;
Modal:
z-index: 1000;
Example:
.header {
z-index: 100;
}
.dropdown {
z-index: 200;
}
.modal-overlay {
z-index: 900;
}
.modal {
z-index: 1000;
}
The exact numbers are not important.
Consistency is important.
MODAL EXAMPLE
HTML:
<div class="modal">
<h2>
Welcome
</h2>
<p>
This is a modal window.
</p>
</div>CSS:
.modal-overlay {
position: fixed;
inset: 0;
z-index: 900;
background-color:
rgba(0, 0, 0, 0.6);
}
.modal {
position: relative;
z-index: 1000;
width: 90%;
max-width: 500px;
margin: 100px auto;
padding: 30px;
background-color: white;
border-radius: 12px;
}
Note:
Because the modal is already inside the overlay, you do not necessarily need a huge separate z-index on the modal for it to appear above the overlay’s background.
This example is mainly useful for understanding layered UI.
WHAT IS OVERFLOW?
Overflow occurs when content is larger than the available dimensions of its container.
Example:
.box {
width: 300px;
height: 100px;
}
If the content requires more than 100px of height, it may overflow.
BASIC OVERFLOW EXAMPLE
HTML:
This is a very long paragraph containing enough text to exceed the available height of the box.CSS:
.box {
width: 300px;
height: 80px;
border: 2px solid black;
}
The content may extend outside the box.
OVERFLOW PROPERTY
Syntax:
selector {
overflow: value;
}
Common values:
visible
hidden
scroll
auto
OVERFLOW: VISIBLE
visible is the initial value of overflow.
Example:
.box {
overflow: visible;
}
Overflowing content remains visible outside the box.
Example:
.box {
width: 250px;
height: 80px;
overflow: visible;
border: 2px solid black;
}
OVERFLOW: HIDDEN
Example:
.box {
overflow: hidden;
}
Content extending outside the element’s padding box is clipped.
The overflowing part is not normally visible.
PRACTICAL EXAMPLE
.card {
width: 300px;
height: 150px;
overflow: hidden;
}
Be careful:
Important content can become inaccessible if it is simply clipped.
OVERFLOW: SCROLL
Example:
.box {
overflow: scroll;
}
This creates a scroll container and provides scrolling behavior.
Depending on the browser and platform, scrollbars may be displayed even when they are not always needed.
OVERFLOW: AUTO
Example:
.box {
overflow: auto;
}
This creates scrolling when necessary.
It is commonly useful for containers whose content may exceed their dimensions.
SCROLLABLE BOX EXAMPLE
HTML:
<h2>
Article
</h2>
<p>
Long content goes here...
</p>
<p>
More content...
</p>
<p>
More content...
</p>CSS:
.content-box {
width: 350px;
height: 200px;
padding: 20px;
overflow: auto;
border: 1px solid #cccccc;
}
OVERFLOW-X
overflow-x controls horizontal overflow.
Example:
.container {
overflow-x: auto;
}
This is useful for:
- Wide tables
- Code blocks
- Horizontal content
- Large fixed-width components
RESPONSIVE TABLE EXAMPLE
HTML:
<table>
<!-- Table content -->
</table>CSS:
.table-wrapper {
overflow-x: auto;
}
This allows the table area to scroll horizontally when the table is wider than its container.
OVERFLOW-Y
overflow-y controls vertical overflow.
Example:
.sidebar {
height: 400px;
overflow-y: auto;
}
If the sidebar content becomes taller than 400px, it can scroll vertically.
OVERFLOW-X AND OVERFLOW-Y TOGETHER
Example:
.box {
overflow-x: hidden;
overflow-y: auto;
}
This can hide horizontal overflow while allowing vertical scrolling.
Use overflow-x: hidden carefully because it can hide real layout problems.
COMMON BAD PRACTICE
Some developers immediately write:
body {
overflow-x: hidden;
}
when a page has unwanted horizontal scrolling.
This may hide the symptom instead of fixing the real layout problem.
The actual cause might be:
- Element wider than viewport
- Large fixed width
- Large margin
- 100vw misuse
- Absolute positioning
- Transform
- Long unbreakable content
Find the real cause first.
OVERFLOW AND BORDER-RADIUS
overflow: hidden is sometimes used with border-radius.
Example:
.card {
border-radius: 20px;
overflow: hidden;
}
.card img {
width: 100%;
}
This can clip child content to the rounded shape of the card.
IMAGE CARD EXAMPLE
HTML:
<img
src="course.jpg"
alt="Course"
>
<div class="content">
<h2>
Web Development
</h2>
</div>CSS:
.image-card {
width: 350px;
border-radius: 16px;
overflow: hidden;
border: 1px solid #dddddd;
}
.image-card img {
display: block;
width: 100%;
}
LONG TEXT PROBLEM
Sometimes a very long word or URL can overflow a container.
Example:
veryveryveryveryveryverylongword
A useful CSS property is:
overflow-wrap
OVERFLOW-WRAP
Example:
.text {
overflow-wrap: break-word;
}
This allows otherwise unbreakable content to wrap when necessary to prevent overflow.
Another modern value is:
overflow-wrap: anywhere;
Example:
.text {
overflow-wrap: anywhere;
}
This gives the browser more opportunities to break long strings when necessary.
WORD-BREAK
CSS also provides:
word-break
Example:
.text {
word-break: break-all;
}
This can break text between characters aggressively.
For ordinary text, use it carefully because it can reduce readability.
TEXT-OVERFLOW
The text-overflow property controls how clipped inline text is represented.
A common value is:
ellipsis
SINGLE-LINE ELLIPSIS
Example:
.title {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If the text is too long, it can appear like:
Professional Web Develop…
IMPORTANT:
text-overflow: ellipsis;
usually needs other conditions such as:
white-space: nowrap;
overflow: hidden;
and a constrained width.
ELLIPSIS EXAMPLE
HTML:
Professional High Performance Web Development Computer
CSS:
.product-title {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
WHITE-SPACE: NOWRAP
Example:
.text {
white-space: nowrap;
}
This prevents normal text wrapping.
Be careful because long content can overflow its container.
CODE BLOCK OVERFLOW
Code often contains long lines.
Example:
pre {
overflow-x: auto;
}
This allows horizontal scrolling when a line of code is wider than the available area.
PRACTICAL EXAMPLE
pre {
max-width: 100%;
padding: 20px;
overflow-x: auto;
background-color: #0f172a;
color: white;
}
OVERFLOW AND FIXED HEIGHT
Example:
.article {
height: 200px;
overflow-y: auto;
}
This creates a vertically scrollable article area.
However, do not give every content section a fixed height unnecessarily.
Allow normal content to expand when possible.
OVERFLOW AND MODALS
Modal windows sometimes need scrolling.
Example:
.modal {
max-height: 80vh;
overflow-y: auto;
}
If the modal content becomes taller than 80% of the viewport height, the modal content can scroll.
PRACTICAL MODAL EXAMPLE
.modal {
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
padding: 30px;
background-color: white;
border-radius: 12px;
}
Z-INDEX + OVERFLOW TOGETHER
These two concepts can interact.
Imagine:
.parent {
overflow: hidden;
}
.child {
position: absolute;
top: -20px;
z-index: 9999;
}
Even with a large z-index, the child may still be clipped by an ancestor’s overflow behavior.
z-index controls stacking.
It does not automatically allow an element to escape clipping.
IMPORTANT CONCEPT
z-index solves:
Which element appears above another?
overflow solves:
What happens to content outside an element’s available area?
They solve different problems.
PRACTICAL DROPDOWN EXAMPLE
HTML:
<button class="menu-button">
Courses
</button>
<div class="dropdown">
<a href="#">
HTML
</a>
<a href="#">
CSS
</a>
<a href="#">
JavaScript
</a>
</div>CSS:
.menu {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 200;
width: 200px;
background-color: white;
border: 1px solid #dddddd;
}
.dropdown a {
display: block;
padding: 12px 16px;
text-decoration: none;
}
If an ancestor uses:
overflow: hidden;
the dropdown may be clipped even if it has a large z-index.
PRACTICAL WEBSITE EXAMPLE
HTML:
<meta charset="UTF-8">
<title>
CSS Z-Index and Overflow
</title>
<link
rel="stylesheet"
href="style.css"
><header class="header">
<h1>
Web Development
</h1>
</header>
<section class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<h2>
Learn Modern CSS
</h2>
<p>
Build professional website layouts.
</p>
</div>
</section>
<section class="products">
<div class="card">
<span class="badge">
NEW
</span>
<h2 class="card-title">
Complete Professional Web Development Course
</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
More content can be placed here to demonstrate overflow.
</div>
</div>
</section>CSS:
- {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
Arial,
sans-serif;
}
.header {
position: sticky;
top: 0;
z-index: 100;
padding: 20px;
background-color: white;
}
.hero {
position: relative;
min-height: 500px;
background-color: #1e293b;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background-color:
rgba(0, 0, 0, 0.5);
}
.hero-content {
position: relative;
z-index: 2;
padding: 120px 30px;
color: white;
}
.products {
padding: 80px 20px;
}
.card {
position: relative;
width: 100%;
max-width: 350px;
padding: 24px;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 16px;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
padding: 5px 10px;
background-color: red;
color: white;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description {
max-height: 120px;
overflow-y: auto;
}
CODE EXPLANATION
.header {
z-index: 100;
}
The sticky header is assigned a higher stacking level than ordinary content within the relevant stacking context.
.hero-overlay {
z-index: 1;
}
The overlay sits above the hero background.
.hero-content {
z-index: 2;
}
The hero content appears above the overlay.
.card {
overflow: hidden;
}
Content outside the card’s clipping area is hidden.
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Long titles are displayed as a single line and clipped with an ellipsis when necessary.
.description {
overflow-y: auto;
}
Vertical scrolling becomes available when the description exceeds its maximum height.
COMMON MISTAKES
- USING HUGE Z-INDEX VALUES
Example:
z-index: 999999999;
This does not automatically solve stacking-context problems.
Understand the stacking hierarchy first.
- Z-INDEX NOT WORKING
Possible causes include:
- Different stacking contexts
- Parent stacking order
- Clipping from overflow
- Unexpected position/layout behavior
- Transform or opacity creating stacking contexts
- THINKING Z-INDEX CONTROLS POSITION
z-index does not move an element.
It controls stacking order.
Position is controlled using properties such as:
position
top
right
bottom
left
- CONFUSING Z-INDEX WITH OVERFLOW
z-index controls layering.
overflow controls content that extends outside an element’s box.
- USING OVERFLOW HIDDEN TO FIX BAD LAYOUT
Do not hide horizontal overflow without finding its actual cause.
- HIDING IMPORTANT CONTENT
Example:
.article {
height: 100px;
overflow: hidden;
}
Important content may become inaccessible.
- USING OVERFLOW SCROLL EVERYWHERE
overflow: scroll;
may create unnecessary scrolling interfaces.
overflow: auto;
is often more appropriate when scrolling should appear only when needed.
- FORGETTING WIDTH FOR ELLIPSIS
text-overflow: ellipsis;
needs an actual overflow condition and typically a constrained inline size.
- USING NOWRAP ON LONG CONTENT
white-space: nowrap;
can create horizontal overflow if the container is not prepared to handle it.
- ASSUMING HIGH Z-INDEX ESCAPES OVERFLOW
An element can still be clipped by an ancestor.
A high z-index does not automatically escape overflow clipping.
- RANDOM Z-INDEX VALUES
Avoid:
z-index: 3;
z-index: 82;
z-index: 9999;
z-index: 500000;
without a system.
Use a consistent layering scale.
- NOT TESTING MODAL HEIGHT
Large modal content can extend beyond the viewport.
A useful pattern is:
.modal {
max-height: 80vh;
overflow-y: auto;
}
NEW & DIFFICULT WORDS
Z-Index = CSS property used to control the stacking level of elements.
Stacking Order = The order in which overlapping elements are painted.
Stacking Context = A local environment that controls how descendant elements are layered.
Layer = A visual level in an overlapping interface.
Overlap = When two or more elements occupy the same visual area.
Overflow = Content extending beyond the available box area.
Visible = Overflow value that allows overflowing content to remain visible.
Hidden = Overflow value that clips overflowing content.
Scroll = Overflow behavior that creates a scroll container.
Auto = Overflow behavior that provides scrolling when necessary.
overflow-x = Property controlling horizontal overflow.
overflow-y = Property controlling vertical overflow.
Clipping = Hiding portions of content outside a defined area.
Ellipsis = Three dots (…) used to indicate clipped text.
text-overflow = Property controlling the visual indication of clipped inline content.
white-space = CSS property controlling whitespace handling and text wrapping.
overflow-wrap = Property allowing long text to wrap to prevent overflow.
Viewport = Visible browser area.
Modal = Interface window displayed above the main page content.
Overlay = Layer placed over underlying content.
Dropdown = Menu that appears from another interface control.
IMPORTANT NOTES
Basic z-index:
.element {
position: relative;
z-index: 10;
}
Sticky header:
.header {
position: sticky;
top: 0;
z-index: 100;
}
Overlay:
.overlay {
position: absolute;
inset: 0;
z-index: 1;
}
Content above overlay:
.content {
position: relative;
z-index: 2;
}
Hide overflow:
overflow: hidden;
Automatic scrolling:
overflow: auto;
Horizontal scrolling:
overflow-x: auto;
Vertical scrolling:
overflow-y: auto;
Single-line ellipsis:
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Long-word handling:
.text {
overflow-wrap: anywhere;
}
Scrollable modal:
.modal {
max-height: 80vh;
overflow-y: auto;
}
PRACTICE
- Create two overlapping boxes.
- Give the first box z-index: 1.
- Give the second box z-index: 2.
- Reverse the z-index values and observe the result.
- Create a product badge above an image.
- Create a hero overlay.
- Place hero content above the overlay.
- Create a sticky header with z-index.
- Experiment with a negative z-index.
- Create a stacking-context example.
- Create a fixed-height box with overflowing text.
- Test overflow: visible.
- Test overflow: hidden.
- Test overflow: scroll.
- Test overflow: auto.
- Create a horizontally scrollable container.
- Create a vertically scrollable container.
- Create a long title with ellipsis.
- Test overflow-wrap with a very long word.
- Create a modal with max-height and vertical scrolling.
ASSIGNMENT
Create a webpage called:
CSS Z-Index & Overflow Practice
The page should contain:
- Sticky header
- Hero section
- Hero background
- Hero overlay
- Hero content
- Product cards
- Sale badges
- Dropdown menu
- Scrollable content box
- Long product title
- Modal
- Footer
Requirements:
- Use z-index.
- Create at least three visual layers.
- Use position with z-index.
- Create a stacking-context example.
- Use overflow: visible.
- Use overflow: hidden.
- Use overflow: auto.
- Use overflow: scroll.
- Use overflow-x.
- Use overflow-y.
- Create a single-line ellipsis.
- Use overflow-wrap.
- Create a scrollable modal.
- Test the page on small and large screens.
MINI PROJECT
Create a layered product card and scrollable modal.
HTML:
<span class="badge">
30% OFF
</span>
<img
src="laptop.jpg"
alt="Laptop"
>
<h2 class="product-title">
Professional High Performance Development Laptop
</h2>
<p>
Powerful laptop for developers and professionals.
</p><div class="modal">
<h2>
Product Details
</h2>
<p>
Add long product information here.
</p>
<p>
Add additional information here.
</p>
</div>CSS:
.product-card {
position: relative;
width: 90%;
max-width: 350px;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 16px;
}
.product-card img {
display: block;
width: 100%;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
padding: 6px 12px;
background-color: red;
color: white;
border-radius: 20px;
}
.product-title {
margin: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-overlay {
position: fixed;
inset: 0;
z-index: 900;
background-color:
rgba(0, 0, 0, 0.6);
}
.modal {
width: 90%;
max-width: 600px;
max-height: 80vh;
margin: 10vh auto;
padding: 30px;
overflow-y: auto;
background-color: white;
border-radius: 16px;
}
QUIZ
- What does z-index control?
Answer:
The stacking order of overlapping elements within their stacking contexts.
- Does a larger z-index always appear above every element on the page?
Answer:
No. Stacking contexts can limit how z-index values are compared.
- What is a stacking context?
Answer:
A local stacking environment where descendant elements are layered relative to each other.
- Which property controls overflowing content?
Answer:
overflow
- What is the default overflow value?
Answer:
visible
- What does overflow: hidden do?
Answer:
It clips content that extends outside the element’s overflow area.
- What does overflow: auto do?
Answer:
It allows scrolling when the content exceeds the available area.
- What does overflow-x control?
Answer:
Horizontal overflow.
- What does overflow-y control?
Answer:
Vertical overflow.
- What is commonly required for a single-line ellipsis?
Answer:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
along with a constrained available width.
- What property can help long words wrap?
Answer:
overflow-wrap
- Can a very high z-index always escape an ancestor with overflow clipping?
Answer:
No.
- What is a useful pattern for a scrollable modal?
Answer:
max-height: 80vh;
overflow-y: auto;
- What is the difference between z-index and overflow?
Answer:
z-index controls stacking order, while overflow controls what happens when content extends outside an element’s available box.
INTERVIEW QUESTIONS
Q: What is z-index?
Answer:
z-index is a CSS property that controls the stacking level of elements when they overlap.
Q: Why does z-index sometimes not work?
Answer:
The element may belong to a different stacking context, its parent may be below another stacking context, or an ancestor may be clipping the element with overflow.
Q: What is a stacking context?
Answer:
A stacking context is a local layering environment. Elements inside it are stacked relative to that context and cannot simply use a huge z-index to escape the parent’s stacking level.
Q: What is overflow?
Answer:
Overflow describes what happens when content extends beyond the available area of an element.
Q: What is the difference between overflow: hidden and overflow: auto?
Answer:
hidden clips overflowing content, while auto allows scrolling when scrolling is necessary.
Q: What is the difference between overflow: scroll and overflow: auto?
Answer:
scroll explicitly creates a scrolling mechanism, while auto provides scrolling when the content requires it.
Q: What is overflow-x?
Answer:
overflow-x controls overflow in the horizontal direction.
Q: What is overflow-y?
Answer:
overflow-y controls overflow in the vertical direction.
Q: How do you create text ellipsis?
Answer:
A common single-line pattern is:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Q: Why should body { overflow-x: hidden; } not automatically be used to fix horizontal scrolling?
Answer:
Because it can hide the symptom while leaving the actual layout problem unresolved.
Q: Can z-index fix content clipped by overflow?
Answer:
Not necessarily. z-index controls stacking, while overflow clipping is a separate layout behavior.
CLASS SUMMARY
In Class 30, you learned CSS Z-Index & Overflow.
You learned:
- z-index
- Stacking order
- Stacking context
- Positive z-index
- Negative z-index
- Layering systems
- Hero overlays
- Product badges
- Sticky header layering
- Modal layering
- overflow
- visible
- hidden
- scroll
- auto
- overflow-x
- overflow-y
- overflow-wrap
- text-overflow
- white-space
- Ellipsis
- Scrollable containers
- Scrollable modals
- Overflow clipping
Remember:
z-index
= Controls stacking order
overflow
= Controls content extending outside a box
Important layering example:
.overlay {
position: absolute;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
}
Important overflow example:
.box {
max-height: 300px;
overflow-y: auto;
}
Single-line ellipsis:
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Do not use huge z-index values or overflow: hidden as random fixes.
Understand the actual stacking and layout problem first.
NEXT CLASS:
Class 031 —