파일 목록
-
📁 이후
-
📁 jquery
-
📁 js
- ex10-1.html
- ex10-2.html
- ex10-5.html
- ex8-11.html
- Ex8-4.html
- Example8-2.html
- example9-18.html
- example9-19.html
- Examplt8-3.html
- exapmle9-21.html
- practic9-4.html
- practice 9-6.html
- practice8-1-3.html
- practice8-2.html
- practice8-3.html
- practice8-5.html
- practice8-6.html
- practice8-7.html
- practice9-1.html
- practice9-5.html
- practice9-8.html
- test6.html
- Test8.html
- test9.html
- test9_10.html
- test9_3.html
- test_9._0.html
- win1_ob2.html
- 챌린지 copy.html
-
- desktop.ini
- ex10-1,2.html
- ex10-3.html
- ex10-5.html
- Title.png
.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 스타일 프로퍼티</title>
<style>
div {
position: absolute;
}
img {
position: absolute;
}
</style>
</head>
<body>
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div>
<img src="C:/Users/remil/Desktop/spade-A.jpg" width="100" height="140" alt="스페이드A">
<img src="C:/Users/remil/Desktop/spade-2.jpg" width="100" height="140" alt="스페이드2">
<img src="C:/Users/remil/Desktop/spade-3.jpg" width="100" height="140" alt="스페이드3">
<img src="C:/Users/remil/Desktop/spade-7.jpg" width="100" height="140" alt="스페이드7">
</div>
<script>
let imgArray = document.getElementsByTagName("img");
for (let i = 0; i < imgArray.length; i++) {
let obj = imgArray[i];
obj.style.zIndex = i;
obj.style.left = "10px";
obj.style.top = "20px";
obj.onclick = shuffle;
}
function shuffle() {
for (i = 0; i < imgArray.length; i++) {
var obj = imgArray[i];
obj.style.zIndex++;
obj.style.zIndex %= imgArray.length;
}
}
</script>
</body>
</html>