css - 在 Firefox 中，单击可聚焦元素内的绝对元素不会聚焦可聚焦元素，除非它具有 CSS 位置

Question

上下文:可聚焦元素内的绝对元素。

在 Firefox 36 中，如果可聚焦元素没有 CSS 位置(相对、固定或绝对)，则单击内部元素不会将焦点设置到可聚焦元素...

知道这是否是一个已知错误吗？

无法在 IE11 和 Chrome 上重现。

为了更好地理解这个问题，这里有一个例子:

Codepen

/* this is just so that the squares are similarly displayed */
section {
  position: relative;
  display: inline-block;
  margin-right: 75px;  
}

div {
  background-color: red;
  width: 100px;
  height: 100px;
  color: white;
  padding: 5px;
}

div:focus {
  background-color: green;
}

div > span {
  position: absolute;
  display: inline-block;
  top: 50px;
  left: 50px;
  background-color: blue;
  width: 100px;
  height: 100px;
  padding: 5px;
}

Context: an absolute element inside a focusable element.<br>
In  Firefox 36, if the focusable element does not have a "position: relative", a click on the inside element will not set the focus on the focusable element...<br>
(red block turns green when focused)
<br><br>
Edit: none works in IE
<br><br>

<section>
  <div style="position: relative;" tabindex="-1">
    With position: relative
    <span>
      click here
    </span>
  </div>
</section>

<section>
  <div tabindex="-1">
    With no position
    <span>
      click here
    </span>
  </div>
</section>

Answer 1

在这种情况下，将触发点击事件并进行事件传播。因此，单击内部元素将传播到父元素，父元素将获得焦点并应用样式。有关更多详细信息，请通过事件传播 event propagation