我正在为我的个人网站制作一个小纸娃娃解剖游戏，但我有一个问题。我遇到了 z-index 无法正常运行的问题。结果，有人指出原因是因为每个启用了 Drog JavaScript 的元素似乎只有 10 和 10 的 z-index。给它除 10 之外的任何其他 z-index 值，无论它是多是少都没有影响。所以我的代码与网站的源代码不一致。
我尝试从我的主机中删除初始文件并将代码粘贴到一个新文件中，认为这是主机错误但无济于事。我尝试将父 div 的 z-index 设置为 10000 无济于事，我试过了！也很重要。这是一个问题，因为我正在尝试添加一个允许元素在举行时“弹出（z-index 增加）”的功能。
我看到的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<title>天兎</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div style="z-index: 10000; position: static; display: block; background: transparent; height: fit-content; width: 768px">
<script src="Drog.js"></script>
<div id="back" style="display: block; position: relative; z-index: 0; height: 776px; width: 768px; background-image: url(dissectbunny/bunny.internalflesh.png); background-repeat: no-repeat; background-position: center; background-size: cover;">
</div>
<!--INNARDS-->
<form name="pancreas" id="pancreas" class="innard" style="position: relative; z-index: 9; left: 47.5%; bottom: 400px; display: block; height: 82px; width: 38px; background-image: url(dissectbunny/bunny.pancreas.png); background-repeat: no-repeat; background-position: 50% 55.3% ; background-size: 1024px;"></form>
<form name="uterus" id="uterus" class="innard" style="position: relative; z-index: 9; left: 40%; bottom: 483px; display: block; height: 116px; width: 154px; background-image: url(dissectbunny/bunny.uterus.png); background-repeat: no-repeat; background-position: 50% 56.8% ; background-size: 1024px;"></form>
<form name="kidney" id="kidney" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 630px; display: block; height: 134px; width: 173px; background-image: url(dissectbunny/bunny.kidneys.png); background-repeat: no-repeat; background-position: 50% 53.5% ; background-size: 1024px;"></form>
<form name="guts" id="guts" class="innard" style="position: relative; z-index: 9; left: 39.5%; bottom: 750px; display: block; height: 115px; width: 160px; background-image: url(dissectbunny/bunny.intestines.png); background-repeat: no-repeat; background-position: 50.3% 49.8% ; background-size: 1024px;"></form>
<form name="stomach" id="stomach" class="innard" style="position: relative; z-index: 9; left: 43%; bottom: 860px; display: block; height: 69px; width: 80px; background-image: url(dissectbunny/bunny.stomach.png); background-repeat: no-repeat; background-position: 49.2% 48.3% ; background-size: 1024px;"></form>
<form name="heart" id="heart" class="innard" style="position: relative; z-index: 9; left: 48%; bottom: 990px; display: block; height: 98.8px; width: 83.2px; background-image: url(dissectbunny/bunny.heart.png); background-repeat: no-repeat; background-position: 52.5% 42.5% ; background-size: 1331.2px;"></form>
<form name="lungs" id="lungs" class="innard" style="position: relative; z-index: 9; left: 40.5%; bottom: 1120px; display: block; height: 117px; width: 142px; background-image: url(dissectbunny/bunny.lungs.png); background-repeat: no-repeat; background-position: 50% 39.8% ; background-size: 1024px;"></form>
<form name="brainless" id="brainless" class="innard" style="z-index: 1; position: relative; z-index: 9; left: 43%; bottom: 1380px; display: block; height: 110px; width: 106px; background-image: url(dissectbunny/bunny.brain.png); background-repeat: no-repeat; background-position: 50% 19% ; background-size: 1024px;"></form>
<!--SKELETON-->
<form name="pelvis" id="pelvis" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 1263px; display: block; height: 130px; width: 172px; background-image: url(dissectbunny/bunny.pelvis.png); background-repeat: no-repeat; background-position: 50% 53.5% ; background-size: 1024px;"></form>
<form name="ribs" id="ribs" class="innard" style="position: relative; z-index: 9; left: 38.7%; bottom: 1450px; display: block; height: 141px; width: 172px; background-image: url(dissectbunny/bunny.rib.png); background-repeat: no-repeat; background-position: 50% 47.5% ; background-size: 1024px;"></form>
<form name="jaw" id="jaw" class="innard" style="position: relative; z-index: 9; left: 38%; bottom: 1646px; display: block; height: 60px; width: 181px; background-image: url(dissectbunny/bunny.jaw.png); background-repeat: no-repeat; background-position: 50% 34% ; background-size: 1024px;"></form>
<form name="skull" id="skull" class="innard" style="position: relative; z-index: 9; left: 34.85%; bottom: 1888px; display: block; height: 228px; width: 233px; background-image: url(dissectbunny/bunny.skull.png); background-repeat: no-repeat; background-position: 50% 11%; background-size: 1024px;"></form>
<!--FLUFF-->
<div name="tummyfluff" id="tummyfluff" class="innard" style="position: relative; z-index: 9; left: 38.5%; bottom: 1895px; display: block; height: 204px; width: 178px; background-image: url(dissectbunny/bunny.bodystuffing.png); background-repeat: no-repeat; background-position: 50% 48%; background-size: 1024px;"></div>
<div name="facefluff" class="innard" id="facefluff" style="position: relative; z-index: 9; left: 34.85%; bottom: 2315px; display: block; height: 230px; width: 233px; background-image: url(dissectbunny/bunny.facestuffing.png); background-repeat: no-repeat; background-position: 50% 12%; background-size: 1024px;overflow: hidden;"></div>
<!--BODY-->
<div style="display: block;
z-index: 10;
position:relative;
bottom: 2610px;
height: 776px;
width: 768px;
background-image: url(dissectbunny/bunny.body.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;"></div>
<!--FLESH-->
<div name="face" id="face" style="z-index: 10; position: relative; left: 34.85%; bottom: 3322px; display: block; height: 230px; width: 232px; background-image: url(dissectbunny/bunny.face.png); background-repeat: no-repeat; background-position: 50% 12% ; background-size: 1024px;"></div>
<form name="tummy" id="tummy" style="z-index: 10; position: relative; left: 38.2%; bottom: 3315px; display: block; height: 184px; width: 178px; background-image: url(dissectbunny/bunny.tummy.png); background-repeat: no-repeat; background-position: 50% 51%; background-size: 1024px;"></form>
<div id="bandaid" style="z-index: 10;
display: block;
visibility: hidden;
position:relative;
bottom: 3803px;
height: 776px;
width: 768px;
background-image: url(dissectbunny/bunny.bandaid.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events:none"></div>
<div id="bandage" style="z-index: 10;
visibility: hidden;
display: block;
position:relative;
bottom: 4580px;
height: 776px;
width: 768px;
background-image: url(dissectbunny/bunny.bandage.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events:none;"></div>
</div>
<div name="bow" id="bow" style="z-index: 10; position: relative; left: 34.5%; bottom: 5310px; display: block; height: 109px; width: 229px; background-image: url(dissectbunny/bunny.bow.png); background-repeat: no-repeat; background-position: 50% 7% ; background-size: 1024px;"></div>
<script>
Drog.on(document.forms["pancreas"]);
Drog.on(document.forms["uterus"]);
Drog.on(document.forms["kidney"]);
Drog.on(document.forms["guts"]);
Drog.on(document.forms["stomach"]);
Drog.on(document.forms["heart"]);
Drog.on(document.forms["lungs"]);
Drog.on(document.forms["pelvis"]);
Drog.on(document.forms["ribs"]);
Drog.on(document.forms["jaw"]);
Drog.on(document.forms["skull"]);
Drog.on(document.getElementById("tummyfluff"));
Drog.on(document.getElementById("facefluff"));
Drog.on(document.getElementById("face"));
Drog.on(document.getElementById("tummy"));
Drog.on(document.getElementById("bow"));
document.getElementsByClassName("innard").addEventListener("onmousedown", function () {this.style.zIndex = "100"; });
document.getElementsByClassName("innard").addEventListener("onmouseup", function () {this.style.zIndex = "9"; });
</script>
</body>
</html>
但是据指出的人说，元素“脸”、“弓”和“肚子”的 z-index 是 10。所以最终我只是接受它并将它自己设置为 10，正如你在这里看到的那样。现在问题出现了，因为我意识到我需要将内脏器官的 z-index 设置得更高以“弹出”，但我似乎做不到，因为使用拖放脚本，它们也被锁定在 10。我这样说是因为只有受 Drog 脚本影响的 div 和表单有这个问题。谁能知道为什么？
有问题的网站是在这里
它好像只是决定随机解决自己？我不知道。我检查了网站的来源，它终于正常更新了。感谢您提供的任何建议。
对于那些想知道的人，问题 child 是 Drog.js 文件中的一行，它将 element.style.zIndex 指定为 10。我不知道为什么它在那里，但我删除了它。