直截了当：对于您的问题，没有干净纯 CSS 解决方案。
由于您的所有元素都几乎相同（例如，我的意思是class），您将找不到涵盖所有配置的解决方案。由于它们彼此没有区别，它们都具有相同的z-index，但堆叠上下文不同。除非您给他们的父母一个不同的z-index 或更改堆叠上下文，否则您将无法访问被阻止的元素。它还归结为您更改代码的限制程度。代码看起来像是由 JS 构建的，您只需将其复制到您的 fiddle 供我们测试。
尝试 #1
尝试#1 只是将高z-index 直接添加到相应的父级。
@mmshr 已经尝试过这样做。但是，他试图给全班打高z-index，正如您已经指出的那样，这当然不会奏效。
但是，您可以尝试仅在其style 属性中为该元素赋予较高的z-index 元素。这归结为您更改代码的限制程度。理论上您可以为此使用 JQuery，但是您选择元素的方式（例如，nth-child()）将我带到 Attempt #2，它使用相同的伪类并且是纯 CSS 的尝试，所以在这种情况下使用 JS 是无稽之谈。顺便说一句，如果您可以像这样更改代码，则可以删除在 hover 上添加 forward 类的小 JQuery 函数。
尝试 #2
这种尝试效果很好，并且您不受更改代码能力的限制，因为这几乎是一行 CSS。正如在 Attempt #1 中所述，您可以使用 pseudo-class 来选择此元素。但是，这并非对所有配置都有效。如果您要添加一个元素
(<div data-bind="template: { name: 'bracket-template', data: $data }">...</div>)之前 被阻止的元素，您将不得不每次更改您的 CSS。但是，如果不需要更改元素和配置（或至少不需要更改顺序），这是一个有效的解决方案：
#bracket-wrapper > div > div:nth-child(8) > div > div {
z-index: 2 !important;
}
在此尝试中，您也可以（并且必须）删除您的小 JQuery 函数：
$('.bracket-part').hover(
function() {
debugger;
$(this).addClass('forward');
},
function() {
$(this).removeClass('forward');
}
);
删除整个东西。
尝试 #3
可能最干净和最好的尝试是使用stacking context。堆栈上下文在here 中进行了解释。但是给你一个简单的概述（W3C）：
每个盒子都属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆叠级别，这是它在 z 轴上相对于同一堆叠上下文中其他堆叠级别的位置。具有较高堆栈级别的框总是在具有较低堆栈级别的框之前格式化。盒子可能有负的堆栈级别。在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。
最重要的是这部分，因为它适用于您的结构：
在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。
如果您查看您的 HTML 树，您会发现以下内容：
根据 stacking-context，我们应该能够通过更改树中这些元素的顺序，为背景中的元素提供比在前面的元素更高的堆叠顺序。
这只是一个猜测，但您可能有一个类似数组的东西来存储数据，并且一些 JS 文件会从中构建一个锦标赛括号。如果您能以某种方式更改这两个元素的顺序（例如通过更改数组的顺序），您将不会使用 CSS，也不会使用任何额外的 JQuery。
如果这些都不起作用怎么办？
那么，我没有看到任何只需要 CSS 的解决方案。
我也想过一个可能的 JS 解决方案，但这是一个艰难的解决方案，我想不出一个（简单的）解决方案。让我解释一下问题：
由于您的 select 位于 div 元素的后面，因此 JQuery 无法在 hover 上识别它（例如），因此您将不得不再次使用伪类，我已经在仅 CSS 的尝试中对此进行了介绍。
我还考虑将-1 的z-index 添加到阻塞元素，因为JQuery 可以在悬停时识别它。但这也带来了问题：阻塞元素现在在后台，被阻塞元素在前面，你也可以点击它。问题是（以前的）阻塞元素现在位于#bracket-wrapper 后面。这也不是一个有效的解决方案，因为您必须再次使用伪类来定位此特定元素。
结论
老实说：这个锦标赛树的设计和结构都很糟糕。不应该有重叠的元素或容器之外的元素，当然也不应该两者结合。如果我的尝试都不合适，我看不到任何 CSS 或 JS 解决方案。至少不是一个简单的。您几乎没有提供有关如何构建锦标赛树的信息，但如果您这样做，情况可能会发生变化。
在这种情况下，我认为重建整个结构是唯一真正干净的解决方案。
编辑
@Deckerz 提供了一个很好的解决方案，它不关注 z-index。相反，它使用pointer-events。我尝试了这种方法但失败了，因为我忘记了一个重要部分。其背后的逻辑很简单：
首先，您禁用.bracket-part 内所有内容的所有点击事件，因为它们不需要。然后将点击事件添加回选择。为了使其更通用以便再次使用，您可以在 CSS 选择器中简单地更改 select 类 .re-enable-events 或其他东西。实际上不需要关于z-index的JS。
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
但是，这仍然是一种解决方法。我仍然建议重构你的代码和 CSS。