1

I've got a div background-img, on top of that a gradient layer (don't wonder about the animation css, this is just a part of my website, but thats not causing any problems i think) . Now i want to have on top of everything my little navbar. Sadly it seems to not work and i can't figure out how to go.. there's always either the pic-background or the gradient on top of it, z-index gets completely ignored on a tag.

HTML:

.welcome-area{
  position:relative;
  margin: 0;
  width: 100%;
  height: 700px;
  text-align: center;
  overflow:hidden;
   position: relative;
  z-index: 45;
}

.pic_background{
  top: 0;
  left: 0;
  position:absolute;
  z-index: 1;
  width: 100%;
  height: 700px;
  background-color: grey;
  background-size: cover;
  background-position: 0 -150px;
  background-repeat: no-repeat;
}

.main-header{
  display: block;
  text-align: center;
  width: 100%;
  height: 100px;
  color: white;
  background-color: transparent;
  position:absolute;
  z-index: 7;
}

.gradient_background{
  width: 100%;
  height: 700px;
  top: 0;
  background-image: linear-gradient(to bottom right, #002c72 , #0058e6);
  animation-name: gradient-background;
  animation-duration: 4s;
  animation-fill-mode: both;
  position: absolute;
  z-index: 2;
}

.main-header a{

}
<div class="welcome-area">
  <div class=" pic_background">
    <header>
        <div class="main-header">
          <nav>
            <a href="aboutme">about me</a>
          </nav>
        </div>
    </header>
 </div>
</div>
<div class="gradient_background"></div>

https://jsfiddle.net/ft6y3guq/17/

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
  • check this one : https://stackoverflow.com/questions/52249736/is-there-any-way-to-place-z-index-according-not-to-its-parent-element/52253877#52253877 ... you need to avoid many z-index so that your element belong to the same stacking context – Temani Afif Dec 08 '18 at 08:33
  • @TemaniAfif, Thanks for your answer! so i should probably make my navbar child element of that absolute gradient layer? –  Dec 08 '18 at 08:44
  • or probably simply use multiple background where you will put the image and the gradient – Temani Afif Dec 08 '18 at 08:45
  • @TemaniAfif yuour little statement with the child and parent elements already did it's purpose! I somehow just wasnt really a fan of putting my navbar in a absolute element, as i dont know if it could cause problems later. But for now, it'll be okay. –  Dec 08 '18 at 08:58

0 Answers0