Position fixed not working because of parent

Asked Jan 11 '21 at 07:41

Active Jan 11 '21 at 09:10

Viewed 120 times

I am using a CSS Parallax effect on my website. The menu icon has to stay within the parallax container. The parallax container however prevents the menu icon from being fixed positioned.

Relevant code snippets

<main class="parallax">
  <svg class="ham" viewBox="0 0 100 100" width="60">
    <path ... />
  </svg>
</main>

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-perspective: 300px;
  perspective: 300px;

  .ham {
    position: fixed;
    top: 0;
    right: 2vw;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    user-select: none;
    transform: rotate(90deg);
    cursor: pointer;
    mix-blend-mode: exclusion;
    z-index: 9999;
  }
}

Here is a working example: https://jsfiddle.net/ak5j6p9r/

Is there any way I can make the menu icon behave, as if it would be positioned fixed?

I would be very thankful for any kind of help!

asked Jan 11 '21 at 07:41

kampfkuchen

So move it out of `.parallax`? – Justinas Jan 11 '21 at 08:00
https://stackoverflow.com/questions/26386038/why-does-perspective-changes-fixed-position-in-css – Master.Deep Jan 11 '21 at 08:03
if you cannot get the icon outside you have no other way – Temani Afif Jan 11 '21 at 09:10

Position fixed not working because of parent

0 Answers0