I’m making a little paperdoll dissection game for my personal site but I have an issue. I encountered a problem where z-index wasn’t functioning properly. Turns out, somebody pointed out the reason why was because every single element with the Drog JavaScript enabled on it seemed to have a z-index of 10 and 10 only. Giving it any other z-index value besides 10 whether it be more or less didn’t make a difference. So my code didn’t align with the website’s source code.
I tried deleting the initial file from my host and pasting the code into a new one thinking it was a host error to no avail. I tried setting the z-index of the parent div to 10000 to no avail and I tried ! important too. This is a problem because I’m trying to add a function that allows elements to “pop out (increase in z-index)” when held.
The code as I see it is this:
<!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.getE# # lementsByClassName("innard").addEventListener("onmousedown", function () {this.style.zIndex = "100"; });
document.getElementsByClassName("innard").addEventListener("onmouseup", function () {this.style.zIndex = "9"; });
</script>
</body>
</html>
But according to the person who pointed out, the z-index for elements “face”, “bow” and “tummy” are at 10. So eventually I just went with it and set it to 10 myself as you can see here. Now the issue arises after realizing I need to set the internal organs z-index higher to “pop out” but I can’t seem to as they’ve been locked at 10 too due to using the drag and drop script. I say this because only the divs and forms affected by the Drog script have this issue. Can anyone figure out why?
The site in question is here