Question

我正在尝试定位HTML元素。我创建了一个父级HTML div与位置相对，它有2个子，一个位置绝对（第一个孩子），另一个有默认位置（第二个孩子）。

    <body>
      <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
      </div>
   </body>

元素的CSS是

#parent {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

#child1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    border: 1px solid red;
}

#child2 {
    width: 300px;
    height: 300px;
    border: 1px solid green;
    /* position: relative; */
}

现在，我在child2上添加了一个事件监听器。但事件被解雇了仅在“child1”之外的部分上具有“child2”类的元素。但是当我将元素“child2”的位置改为亲戚时，我得到了事件在整个“child2”元素上触发。

这种行为的原因是什么？

var el = document.getElementById("child2");  
el.addEventListener("click", 
      function () {   
          alert("Hello"); 
      });

JSFiddle的链接是：

http://jsfiddle.net/GS2306/peby5Lgk/

Answer 1

如果你没有在#child2上定义任何位置属性，那么它是静态的。静态div与绝对和相对定位的div重叠，因为它们没有z-index。因此，您只能在#child2上与#child1重叠的点击事件。

但是当您将#child2位置设置为相对时，它会与#child1重叠（因为#child2会在#child1之后插入，并且两者都具有相同的z-index）。因此，您可以在整个#child2上获得点击事件，因为它现在不与#child1重叠

Answer 2

为元素添加背景颜色可以清楚地了解观察到的行为发生的原因。绝对定位的元素 - #child1 - 位于静态定位元素的“顶部” - #child2

var el = document.getElementById("child2");
el.addEventListener("click", function () {
    alert("Hello");
});

#parent {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}
#child1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    opacity:0.8;
    background: #f0f;
    border: 1px solid red;
}
#child2 {
    width: 300px;
    height: 300px;
    border: 1px solid green;
    background: #f00;
    /* position: relative; */
}

<body>
    <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

当您更改上述代码段以在position: relative上设置#child2时，您会看到#child2现在显示在#child1的“顶部”。

CSS规范指出，定位元素在堆叠顺序中总是比非定位（position: static）元素更高。如果两个元素都已定位且未指定z-index，则它们的堆叠顺序定义为它们的绘制顺序（标记中稍后出现的元素将显示在标记中较早出现的元素的顶部）。

在具有CSS位置的HTML中堆叠元素

2 个答案: