如何使parent1的子元素具有比父2的子元素更高的z索引（与其他父元素具有相同的z索引）？

Question

I have the following HTML:

HTML

<div id="map">
  <div class="parent">
    <svg>
      <div class="child"></div>
      <div class="child"></div>
    </svg>
  </div>
  <div class="parent">
    <svg>
      <div class="child"></div>
      <div class="child"></div>
    </svg>
  </div>
</div>

CSS

.parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 700px;
}

svg {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

Abbreviations:

first parent-element: p1

second parent-element: p2

child-elements from p1: c1

child-elements from p2: c2

Background info:

Both parent-elements are positioned exactly above each other. It seems that the p2 is "a complete layer above the p1".

Problem/Question:

Currently i can NOT click on ANY c1. No chance. The p2 seems to be a complete layer above the p1. How do I manage that c2 still are above c1 BUT I am able to click on c1 if there are no c2 directly above them.

Answer 1

You could add pointer-events: none to the .parent divs and then add pointer-events:all to the .child divs.

This would mean only the actual children can be clicked. If there is no c2 then c1 should be clickable

something like this? http://jsfiddle.net/ekL6632c/1/