CSS Overflow, Float and z-index

This chapter covers three things that confuse many beginners: content that does not fit, floating elements, and elements that overlap.

Overflow

When content is bigger than its box, it overflows. The overflow property decides what happens to the extra part.

Value	Result
`visible`	Content spills out of the box (the default)
`hidden`	Extra content is cut off and hidden
`clip`	Like `hidden`, but the box can never be scrolled, not even by code
`scroll`	Scroll bars are always shown
`auto`	Scroll bars appear only when needed

You can also control one direction with overflow-x (left-right) and overflow-y (up-down).

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.box {
  width: 220px;
  height: 80px;
  border: 2px solid #264de4;
  margin-bottom: 30px;
  padding: 6px;
}
.visible { overflow: visible; }
.hidden  { overflow: hidden; }
.auto    { overflow: auto; }
</style>
</head>
<body>

<div class="box visible">visible: This notice about the new admission schedule is too long for its small box, so it spills out.</div>
<div class="box hidden">hidden: This notice about the new admission schedule is too long for its small box, so it is cut off.</div>
<div class="box auto">auto: This notice about the new admission schedule is too long for its small box, so a scroll bar appears.</div>

</body>
</html>

Try it Yourself »

Scrolling Tables on Phones

Wide tables break small screens. Wrap the table in a box with overflow-x: auto, and only the table scrolls sideways, not the whole page.

Example

css

.table-wrap {
  overflow-x: auto;
}

Cutting Text with an Ellipsis

To show one line of text with "..." at the end, you need three properties together:

Example

css

.title {
  white-space: nowrap;      /* keep it on one line */
  overflow: hidden;         /* hide the extra part */
  text-overflow: ellipsis;  /* show ... where it is cut */
}

For more than one line, every modern browser supports -webkit-line-clamp (the -webkit- name works in all of them, not only in Chrome):

Example

css

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* show 3 lines, then ... */
  overflow: hidden;
}

Float

float pushes an element to the left or right, and text flows around it, like a picture in a magazine.

Value	Effect
`left`	Element moves to the left; content wraps on its right
`right`	Element moves to the right; content wraps on its left
`none`	No float (the default)

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.quote {
  float: right;
  width: 160px;
  margin: 0 0 10px 15px;
  padding: 12px;
  background-color: #fef3c7;
  font-style: italic;
}
.footer {
  clear: both;
  border-top: 1px solid #cccccc;
  padding-top: 8px;
}
</style>
</head>
<body>

<div class="quote">"I got my first freelance order after this course." - Ali</div>
<p>Our institute in Orangi Town started with one small room and ten students. Today hundreds of young people learn web development, design and freelancing here every year. Many of them now work from home for clients all over the world.</p>
<p>Classes are short and practical, and every student builds real projects.</p>
<div class="footer">This line uses clear: both, so it starts below the float.</div>

</body>
</html>

Try it Yourself »

clear: both makes an element start below any floats before it.

The Float Container Problem

A parent that holds only floated children collapses to zero height, because floats are taken out of the normal flow. The modern fix is one line on the parent:

Example

css

.parent {
  display: flow-root;
}

Floats were once used to build whole page layouts. Today use Flexbox and Grid for layout, and keep float for wrapping text around a box or image.

z-index and Stacking

You met z-index in Display and Position: a higher number comes to the front. It only works on elements that are positioned (relative, absolute, fixed or sticky), or that are flex or grid items.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  position: absolute;
  width: 120px;
  height: 80px;
  padding: 8px;
  color: white;
  font-family: Arial, sans-serif;
}
.one   { background-color: #264de4; top: 20px; left: 20px; z-index: 3; }
.two   { background-color: crimson; top: 50px; left: 70px; z-index: 2; }
.three { background-color: seagreen; top: 80px; left: 120px; z-index: 1; }
</style>
</head>
<body>

<div class="card one">z-index: 3</div>
<div class="card two">z-index: 2</div>
<div class="card three">z-index: 1</div>

</body>
</html>

Try it Yourself »

Without z-index, the later element in the HTML would be on top. With it, the blue card is in front.

Stacking Contexts

Sometimes z-index: 9999 still does not bring an element to the front. The reason is a stacking context: a group whose children are layered only among themselves. A child can never come in front of something outside its group, whatever its number.

A new stacking context is created by, for example:

A positioned element with a z-index other than auto
opacity less than 1
transform, filter or isolation: isolate

If your popup hides behind a header, check the parents of the popup. One of them probably creates a stacking context with a low z-index. Moving the popup to the end of <body> often fixes it.

Exercise

Which overflow value shows scroll bars only when the content is too big?

visiblescrollautohidden