css - 如何使 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 是“p1 之上的完整层”。

问题/问题:

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

Answer 1

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

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

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