Search code examples
htmlcssreactjsz-index

Z-index displays differently in chrome and firefox

I have 2 components, navBar and wings animation, so the issue is that in chrome it works properly(navBar is under wings), but in fireFox navBar is on top of wingsAnimation I know that browsers have different engines but don't have enough exp to fix thatscreen of issue

.navBarWrap {
  display: block;
  height: 120px;
  z-index: 2;
  position: absolute;
  width: 100%;
}

.wingWrap {
  position: relative;
  z-index: 100 !important;
  transform: translateY(10rem);
}
Solution

  • I think that a question from 6 years ago could help you. Take a look at "z-index behaviour is different in chrome to firefox". Does this help you?