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

Question

我有以下 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%;
}

缩写：

第一个父元素：p1

第二个父元素：p2

来自 p1 的子元素：c1

来自 p2 的子元素：c2

背景资料：

两个父元素正好位于彼此之上。好像p2是"a complete layer above the p1"。

Problem/Question:

目前我不能点击任何c1。没有机会。 p2 似乎是 p1 之上的完整层。我如何管理 c2 仍然在 c1 之上，但是如果没有 c2 在它们的正上方，我可以点击 c1。

Answer 1

您可以将 pointer-events: none 添加到 .parent div，然后将 pointer-events:all 添加到 .child div。

这意味着只能单击实际的 children。如果没有 c2 那么 c1 应该可以点击

像这样的？ http://jsfiddle.net/ekL6632c/1/

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

How to make child elements from parent1 have a higher z-index than child elements from parent 2 (with same z-index as other parent)?

html

css

position

z-index