0

I managed to overlap my right hand content above my leaflet map in the background by using position and z-index. But I want to keep the map in back still controllable.

Is there a way, if yes which one, to make the background of the overlapping div not only transparent but also non interactive?

https://jsfiddle.net/8kujbh3g/3/

da-chiller
  • 156
  • 1
  • 13

2 Answers2

1

As so often SO brought the answer.

Basically its

overlapping parent pointer-events: none;

overlapping child pointer-events: auto;

https://jsfiddle.net/8kujbh3g/4/

da-chiller
  • 156
  • 1
  • 13
0

The best way to achieve that is to let the left hand content overlap with right hand content. Instead of using, add margin to the left hand content. Check the code below.

div.map {
  position: absolute;
  display: inline-block;
  z-index: 10;
  background-color: rgba(255, 0, 0, 0.25);
  margin-top: 16px;
}

div.controls {
  position: absolute;
  z-index: 0;
  background-color: rgba(0, 255, 0, 0.25);
  display: flex;
  width: 100%;
}
<div class="container">
  <div class="map">
    <a href='#'>My occupied link</a>
  </div>
  <div class="controls">
    <div class="main-controls">
      Here goes some more controls
    </div>
    <div class="actual-controls">
      <a href='#'>toolbox link</a><br />
      <a href='#'>toolbox link</a><br />
    </div>
  </div>
</div>
Pranav Rustagi
  • 2,604
  • 1
  • 5
  • 18
  • Thank you @Pranav_Rustagi - Please find my updated version in the OT. The background has to be fully accessible, apart from the controls in the front – da-chiller Aug 04 '20 at 11:48
  • @da-chiller It does not seem possible to do that, unless, you position every element which has to be accessible, individually. If you want to keep the background color, you can create a div and set its z-index to minimum of all. And clear rest of the backgrounds. – Pranav Rustagi Aug 04 '20 at 12:54
  • @Pranav_Rustagi look what SO found just next to your comment :) https://stackoverflow.com/a/4839672/5811471 Thanks again. – da-chiller Aug 04 '20 at 13:53