Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Layout - The z-index Property

10 minutes

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Layout – The z-index Property

The z-index Property

When elements are positioned, they may overlap with other elements.

The z-index property dictates the stacking order of an element, determining whether it should be placed in front of or behind other elements.

The stack order of an element can be positive or negative:

Example

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Note: The z-index property exclusively affects positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

Another z-index Example

Example

Here we observe that an element with a higher stack order consistently appears above an element with a lower stack order:

<html>
<head>
<style>
.container {
position: relative;
}

.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>

<div class=”container”>
  <div class=”black-box”>Black box</div>
  <div class=”gray-box”>Gray box</div>
  <div class=”green-box”>Green box</div>
</div>

</body>
</html>

Without z-index

When two positioned elements overlap each other and no z-index is specified, the element declared later in the HTML code will be displayed on top.

Example

In the same example as previously mentioned, but in this case, no z-index is specified:

<html>
<head>
<style>
.container {
position: relative;
}

.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>

<div class=”container”>
  <div class=”black-box”>Black box</div>
  <div class=”gray-box”>Gray box</div>
  <div class=”green-box”>Green box</div>
</div>

</body>
</html>

CSS Property

Property	Description
z-index	Specifies the stacking order of an element.