Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS- z-index

CSS- z-index | CSS for Beginners - Class 6 PDF Download

CSS Layout - The z-index Property


The z-index property specifies the stack order of an element.

The z-index Property


When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:

CSS- z-index | CSS for Beginners - Class 6

Example

img {

  position: absolute;

  left: 0px;

  top: 0px;

  z-index: -1;

}

Note: z-index only works on 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 see that an element with greater stack order is always 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


If two positioned elements overlap each other without a z-index specified, the element defined last in the HTML code will be shown on top.
Example
Same example as above, but here with no z-index 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>

Test Yourself With Exercises


Exercise:
Both the header and the paragraph are positioned at the top of the page.
Make sure that the header is placed on top of the paragraph.
<style>

_____ {

  position: absolute;

  top: 0;

  

_____ : 1;  

}

_____ {

  position: absolute;

  top: 0;

  

_____ : 0;

}

</style>


<body>

  <h1 id="mytitle">This is a heading</h1>

  <p id="myintro">This is a paragraph</p>

</body>

<style>

#mytitle {

  position: absolute;

  top: 0;

  

z-index: 1;  

}

#myintro {

  position: absolute;

  top: 0;

  

z-index : 0;

}

</style>


<body>

  <h1 id="mytitle">This is a heading</h1>

  <p id="myintro">This is a paragraph</p>

</body>

CSS Property

CSS- z-index | CSS for Beginners - Class 6

The document CSS- z-index | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Semester Notes

,

Summary

,

CSS- z-index | CSS for Beginners - Class 6

,

study material

,

CSS- z-index | CSS for Beginners - Class 6

,

video lectures

,

ppt

,

Viva Questions

,

Free

,

past year papers

,

Sample Paper

,

Objective type Questions

,

pdf

,

Exam

,

shortcuts and tricks

,

mock tests for examination

,

MCQs

,

CSS- z-index | CSS for Beginners - Class 6

,

Important questions

,

Extra Questions

,

Previous Year Questions with Solutions

,

practice quizzes

;