in Firefox, click on absolute element inside focusable element does not focus focusable element unless it has a CSS position

Question

Context: an absolute element inside a focusable element.

In Firefox 36, if the focusable element does not have a CSS position (relative, fixed, or absolute), a click on the inside element will not set focus to the focusable element...

Any idea whether that is a known bug?

Not reproductible on IE11 and Chrome.

For better understanding of the issue, here's an example:

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

In this case, the click event is fired and event propagation will takes place. So click on the inside element will propagate to the parent element and the parent will get focus and style will be applied. For more details go through event propagation event propagation