Z-index wont hide anchor

amitria 0
Viewed 34

so I am trying to add a loader to a webpage and it wont hide the all elements, although on a page it does at another html it doesnt , it's about a logo which z-index is set to 1 but the loader its set to 99999, I've tried to change the z-index of the logo to 0 but it still shows up, SO studying more the only difference is that on a page the logo is anchor and on another its not , and where its declared as anchor it wont hide on loading animation.

<div class="white-logo"><a href="proiectare.html"><img src="img/logo_black.png" alt="logo_white"></a></div>

.loader_bg{
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader{
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 200px);
left: calc(50vw - 75px);
text-align: center;
}
.loader:before, .loader:after{
content: '';
border: 1em solid #BDBDBD;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before{
animation-delay: .5s;
}
@keyframes loader{
0%{
    transform: scale(0);
    opacity: 0;
}
50%{
    opacity: 1;
}
100%{
    transform: scale(1);
    opacity: 0;
}
}
.white-logo > a > img {
display: run-in;
width: 5%;
margin-left: 10%;
margin-top: -8.5%;
position: absolute;
z-index: 1;
}

I added some screenshots to understand the problem with the difference , I think is from anchor but I dont know what to do

Here are the photos and the difference

css html
2 Answers

I am not certain if this is what you want (I assume the animation should display over the .loader_bg) so I just set the .loader_bg to have a negative z-index.

.loader_bg {
   z-index: -1;
}

I have taken the liberty of making a jsfiddle with the relevant code in, but you will need to update if this is not the desired effect, adding an example would help, but you can also edit the fiddle and iterate over it.

EDIT

Sorry I see the issue now, I added some text to the anchor.

Change your .loader_bg with these properties:

.loader_bg {
   z-index:0;
   top: 0;
}
lharby0

Solved, seemed I had two files with the css animation, one for the text and one for the circles, I put all of them in one file and it worked, thank you!

amitria0
Related