Answer:
The answer to this question is given below in the explanation section.
Explanation:
In this question, there are four div tags that are given with the style of z-index.
To implement these div tags with z-index style in HTML, the code is given below:
<!DOCTYPE html>
<html>
<head>
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
</style>
</head>
<body style="position:absolute">
<h1> z-index</h1>
<div id="container">
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:10;">z-index 2</div>
<div style="top:60px;left:60px;z-index:0;">z-index 3</div>
<div style="top:80px;left:80px;z-index:100;">z-index 4</div>
</div>
</body>
</html>
In this code, four div tags are implemented with their z-index. When will you run this code, you will see the div tag with the lowest z-index show behind all other div tags, and the div tag with the highest z-index overlap all other lowest z-index div tags. The div tag that is the highest z-index value overlap all others.
Therefore, the div tag with the highest z-index will actually be seen.The correct option to this question is:
<div style="z-index:100;"></div>
