在 Firefox 中，当单击具有固定位置的子元素时，父元素不会获得焦点答案

【问题标题】：In Firefox, parent element won't get focus when child with fixed position is clicked在 Firefox 中，当单击具有固定位置的子元素时，父元素不会获得焦点
【发布时间】：2017-08-14 23:44:23
【问题描述】：

我在可聚焦元素中有一个固定元素。当我单击固定元素时，父可聚焦元素应获得焦点。它适用于 Chrome、Edge 和 IE11，但不适用于 Firefox。

.focusable {
  background-color: red;
  width: 200px;
  height: 200px;
}

.focusable:focus {
  background-color: blue;
}

.fixed {
  top: 200px;
  background-color: green;
  position: fixed;
  height: 100px;
  width: 200px;
}

<div class="focusable" tabindex="0">
<div class="fixed">
Parent will not get focus.
</div>
</div>

您知道任何解决方法吗？我想避免处理 mousedown 事件并调用 preventDefault()。

【问题讨论】：

标签： firefox focus css-position

【解决方案1】：

因为您使用的是内部子元素的固定位置

删除position:fixed，它会正常工作

【讨论】：

当然。但我说的是位置固定的元素。
你不能使位置相对于任何父元素固定，所以唯一的方法是使用相对绝对方法检查这个以获得更多间隙jsfiddle.net/hx7wsgqz
这不是问题，我不需要相对于父元素固定位置。
只有在涉及 javascript 之后才能实现，例如 jsfiddle.net/hx7wsgqz/1
你最终会得到类似jsfiddle.net/9h3nwr45/5的东西。这正是我想要避免的。我将尝试报告 Firefox 中的错误。