I have a couple sets of layers that are all set to position: absolute; and they display over each other. I have delays and fadeOut's in place so it acts in sequence. For some reason on my last display layer, if I set the z-index to a number that is displays, it effects all of the others, even though it is not showing. There will just be a blank section with my background-color, sort of like a block.
Here is the code for it. The div in question is home-learn. I have tried changing the z-index to be above the other layers, equal and less than equal. Each different way causes its own separate issue.
For example, right now I have it set to 1 z-index number less than the layer over top of that. Doing this causes it not to show, but if I make it equal or more, the background-color will go over-top of blue-home-text in the size of the wording for home-learn.
Does anyone see what I am doing wrong? To see this live may help. In a comment below, I will add the live site. You will see it right on page load, after the sequence completes.
<div class="red">
<div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
<span class="hand-text">HELLO</span>
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
<div id="circle-text">We're Optimum
<br>Designs</div>
<div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
<!-- <div id="text-button"><span class="border-span">More About Us</span></div> -->
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>
.red {
background-color: #0085A1;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
}
.hand {
width: auto;
height: auto;
position: absolute;
z-index: 100;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
top: 60%;
left: 50%;
-webkit-animation: wave 4s 1 normal forwards;
animation: wave 4s 1 normal forwards;
}
.hand-text {
position: absolute;
text-align: center;
left: 0;
right: 0;
top: 42%;
color: #FFF;
font-size: 2em;
font-weight: bold;
opacity: 0;
-webkit-animation: waveTxt 2s 0s 2 alternate;
animation: waveTxt 2s 0s 2 alternate;
}
.circle {
display: none;
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#blue-home-text {
color: #FFF;
display: none;
text-align: center;
position: absolute;
margin: 0 25%;
top: 50%;
font-size: 2.3em;
z-index: 99;
}
#home-learn {
color: #FFF;
position: absolute;
text-align: center;
/*margin: 0 25%;*/
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 2.3em;
z-index: 98;
}
