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

【问题标题】：Stacking of Elements in HTML having CSS positions堆叠具有 CSS 位置的 HTML 中的元素
【发布时间】：2015-08-31 08:34:57
【问题描述】：

我正在尝试定位 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/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

谢谢。我现在明白了。

【解决方案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>

当您将上述 sn-p 更改为在 #child2 上设置 position: relative 时，您会看到 #child2 现在出现在 #child1 的“顶部”。

CSS 规范规定，定位元素在堆叠顺序中总是比非定位 (position: static) 元素更高。如果两个元素都已定位并且没有指定z-index，则它们的堆叠顺序定义为它们的绘制顺序（标记中较晚出现的元素将出现在标记中较早出现的元素之上）。

【讨论】：

感谢您的快速回复。我现在很清楚这个概念。