Here's the finished, working code if anyone else needs it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Orbit</title>
<style>
body {
margin-top: 15%;
background-image: url("space.gif");
background-repeat: no-repeat;
background-size: 100%;
}
#container {
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
z-index: 0;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: grey;
border-radius: 100%;
z-index: 2;
float: left;
}
#earth {
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
float: left;
z-index: -1;
position: relative;
}
.rainbow-button {
width: calc(20vw + 6px);
height: calc(8vw + 6px);
max-width: 100px;
max-height: 50px;
background-image: linear-gradient(
90deg,
#00c0ff 0%,
#ffcf00 49%,
#fc4f4f 80%,
#00c0ff 100%
);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.rainbow-button:hover {
animation: slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position: 20vw;
}
}
</style>
</head>
<body>
<center>
<div>
<p>
<button onclick="myMove()" class="rainbow-button" alt="Button">
Click Me
</button>
</p>
<p>
<button onclick="stop()" class="stop-button" alt="Button">
Stop
</button>
</p>
<!-- ignore this, it's not used -->
<div id="container">
<div id="animate" style="position: relative">
<img src="moon.png" style="max-width: 100%" />
</div>
</div>
</div>
<div id="earth"></div>
</center>
<script>
function myMove() {
const container = document.getElementById("container");
const box = document.getElementById("animate");
let t = setInterval(move, 1);
let pos = 1;
let test = true;
let zdex = "2";
function move() {
box.style.left = `${pos}px`;
box.style.top = `${pos}px`;
if (test) {
pos++; /* mov down */
} else {
pos--; /* move up */
}
/* update the direction when you reach the top or bottom limit*/
if (pos >= 350) {
test = false;
zdown();
} else if (pos <= -30) {
test = true;
zup();
}
}
function zdown() {
box.style.zIndex =
"-10"; /* trying to make it go under the container on the way back */
}
function zup() {
box.style.zIndex =
"2"; /* trying to make it go back to it's original position for the journey across */
}
}
</script>
</body>
</html>
I'm expecting for the object that is moving to go on the zindex above in the first direction then in the direction going back to go on the zindex below to create a kind of "orbiting" like animation. Here is an example of what I'd like to accomplish (in the opposite diagonal): https://assets1.cbsnewsstatic.com/hub/i/2015/08/05/7a86d00b-3b24-497e-8cab-14ca3a735a46/dscovrepicmoontransitfull-small.gif
I Update My Solution As per Your Code Now You can able to show it's working properly .
Your Solution is Here , actually it is not for z-index , it is occur because of the #animate section position is not given, I updated it and also add one dummy div so that now z-index is clearly visible it is working.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Orbit</title>
<style>
body {
margin-top: 15%;
background-image: url("space.gif");
background-repeat: no-repeat;
background-size: 100%;
}
#container {
width: 400px;
height: 400px;
background: green;
z-index: 0;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: grey;
border-radius: 100%;
z-index: 2;
}
#earth {
background: green;
border-radius: 50%;
background-image: url("earth.png");
background-position: center;
background-repeat: no-repeat;
background-size: 160%;
float: left;
z-index: -1;
position: relative;
}
.rainbow-button {
width: calc(20vw + 6px);
height: calc(8vw + 6px);
max-width: 100px;
max-height: 50px;
background-image: linear-gradient(
90deg,
#00c0ff 0%,
#ffcf00 49%,
#fc4f4f 80%,
#00c0ff 100%
);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.rainbow-button:hover {
animation: slidebg 2s linear infinite;
}
@keyframes slidebg {
to {
background-position: 20vw;
}
}
</style>
</head>
<body>
<center>
<div>
<p>
<button onclick="myMove()" class="rainbow-button" alt="Button">
Click Me
</button>
</p>
<p>
<button onclick="stop()" class="stop-button" alt="Button">
Stop
</button>
</p>
<!-- ignore this, it's not used -->
<div id="container">
<div id="animate" style="position: relative">
<img src="moon.png" style="max-width: 100%" />
</div>
</div>
</div>
<div id="earth"></div>
</center>
<script>
function myMove() {
const container = document.getElementById("container");
const box = document.getElementById("animate");
let t = setInterval(move, 1);
let pos = 1;
let test = true;
let zdex = "2";
function move() {
box.style.left = `${pos}px`;
box.style.top = `${pos}px`;
if (test) {
pos++; /* mov down */
} else {
pos--; /* move up */
}
/* update the direction when you reach the top or bottom limit*/
if (pos >= 350) {
test = false;
zdown();
} else if (pos <= -30) {
test = true;
zup();
}
}
function zdown() {
box.style.zIndex =
"-10"; /* trying to make it go under the container on the way back */
}
function zup() {
box.style.zIndex =
"2"; /* trying to make it go back to it's original position for the journey across */
}
}
</script>
</body>
</html>