Clickable Element under Overlay - HTML/CSS

Question

so I am currently working on a web-app with a nav-bar on the bottom. I decided to have a linear-gradient overlay above the underlying elements in order to make the menu more visible. You can see in this screenshot what I mean, I think. Now I faced the problem that when an item I want to be clickable is just below that, one can obviously not click that. I can't change the z-index since that would defeat the whole purpose of the overlay.

The Overlay is just a background applied to the menu div, which is located at the very bottom in the dom.

Its CSS:

div{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: sticky;
    bottom: 0;
    padding: 5em 0 1em 0;
    background: linear-gradient(var(--opaque-main-background), var(--main-background));
  }

All the other elements, including those I want to be clickable have no particular positioning. It's a vue app, so if you need any more information I forgot, here is a live demo . You may have to resize the window for the issue to kick in

Is there any basic/simple solution to this problem I am just not seeing right now?

Answer 1

You can use pointer-events here. Just add pointer-events:none to your css for div

div{
  pointer-events:none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  bottom: 0;
  padding: 5em 0 1em 0;
  background: linear-gradient(var(--opaque-main-background), var(--main-background));
}

Hope it helps.

Answer 2

ok. here is a solution.

• add pointer-event:none to this menu div above in css.

• then to each span add a pointer-event: auto like this:

  span[data-v-4fb6fd22] { position: relative; pointer-events: auto; }