народ помогите с функцией... никак не пойму как addEventListener связать с z-index
если можно с построчными коментами... заранее спс !
https://gist.github.com/archivisions...8ce81589646d3a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
box-sizing: border-box;
}
.slider {
background-color: rgba(229, 255, 248, 0.28);
width: 500px;
height: 500px;
align-content: center;
position: relative;
border: 1px solid black;
}
#previewRed {
width: 300px;
height: 400px;
position: absolute;
background: red;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 1;
}
#previewYellow {
width: 300px;
height: 400px;
position: absolute;
background: #fffb1d;
padding: 10px;
border: 1px solid black;
z-index: 2;
}
#previewGreen {
width: 300px;
height: 400px;
position: absolute;
background: #5dc35e;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 3;
}
#previewBlue {
width: 300px;
height: 400px;
position: absolute;
background: #655bc3;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 4;
}
.contrl {
position: relative;
width: 100px;
height: 400px;
border: 1px solid rgba(70, 243, 19, 0.58);
margin-left: 350px;
}
#red {
position: absolute;
width: 75px;
height: 75px;
background: red;
border: 1px solid black;
margin: 10px;
color: white;
}
#yellow {
position: absolute;
width: 75px;
height: 75px;
background: #fffb1d;
border: 1px solid black;
margin: 10px;
top: 100px;
}
#green {
position: absolute;
width: 75px;
height: 75px;
background: #5dc35e;
border: 1px solid black;
margin: 10px;
color: white;
top: 200px;
}
#blue {
position: absolute;
width: 75px;
height: 75px;
background: #655bc3;
border: 1px solid black;
margin: 10px;
color: white;
top: 300px;
}
</style>
<body>
<div class="slider">
<div id="previewRed">Red</div>
<div id="previewYellow">Yellow</div>
<div id="previewGreen">Green</div>
<div id="previewBlue">Blue</div>
<div class="contrl">
<button id="red">Red</button>
<button id="yellow">Yellow</button>
<button id="green">Green</button>
<button id="blue">Blue</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>