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是＆＃34;在p1＆＃34;之上的完整层。

问题/问题：

目前我无法点击任何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/

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

1 个答案: