Kod w html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<link rel="stylesheet" href="css.css">
</head>
<body style="background-color: rgb(21, 21, 11);">
<div class="div1">
<div class="div2">z-index 2</div>
<div class="div3">z-index 3</div>
<div class="div4">z-index 4</div>
<div class="div5">z-index 5</div>
<div class="div6">z-index 6</div>
</div>
</body>
</html>
Kod w css:
.div1{
-webkit-text-fill-color: aquamarine;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-image: linear-gradient(rgb(231, 240, 112),rgb(127, 235, 127), rgb(212, 212, 231));
width: 700px;
height: 450px;
margin: auto;
margin-top: 100px;
position: relative;
background-size: cover;
padding: 15px;
}
.div2{
background-color: antiquewhite;
width: 150px;
height: 300px;
border-radius: 10px;
margin-left: 50px;
transform:rotate(-15deg);
transition: 0.5s ease-in-out;
z-index: 2;
position: absolute;
}
.div3{
background-color: rgb(164, 95, 3);
width: 150px;
height: 300px;
border-radius: 10px;
margin-left: 150px;
transform:rotate(12deg);
transition: 0.5s ease-in-out;
z-index: 3;
position: absolute;
}
.div4{
background-color: rgb(168, 141, 106);
width: 150px;
height: 300px;
border-radius: 10px;
margin-left: 250px;
transform:rotate(9deg);
transition: 0.5s ease-in-out;
z-index: 4;
position: absolute;
}
.div5{
background-color: rgb(3, 153, 164);
width: 150px;
height: 300px;
border-radius: 10px;
margin-left: 350px;
transform:rotate(-54deg);
transition: 0.5s ease-in-out;
z-index: 5;
position: absolute;
cursor: progress;
}
.div6{
background-color: rgb(219, 213, 205);
width: 150px;
height: 300px;
border-radius: 10px;
margin-left: 450px;
transform:rotate(15deg);
transition: 0.5s ease-in-out;
z-index: 6;
position: absolute;
}
.div2:hover{
z-index: 7;
transform: rotate(360deg);opacity: 0.2;
}
.div3:hover{
z-index: 7;
transform: rotate(0deg);opacity: 0.3;
}
.div4:hover{
z-index: 7;
transform: rotate(0deg);opacity: 0.4;
}
.div5:hover{
z-index: 7;
transform: rotate(0deg);opacity: 0.5;
}
.div6:hover{
z-index: 7;
transform: rotate(360deg);opacity: 0.6;
}