在CSS中溢出时使用z-index将HTML元素置于前面

Question

当我将mazxswpoi容器悬停在元素上时，我试图让蓝色矩形容器比其他盒子有更大的z-index。

这里的游戏3有更大的z-index，但是我想在下面的蓝色圆圈中访问overflow Loser，但我不能，除非我将鼠标悬停在蓝色矩形上以获得焦点。

有没有办法解决这个问题，可以用CSS处理它还是需要JQuery？

我创建了一个可以复制它的小提琴，因此忽略任何JS错误，因为实际页面需要相当多的包含，但问题是机智。将鼠标悬停在第四场比赛中，该比赛有三个下拉菜单，来源，池，种子。你可以选择种子就好了。但是，将鼠标悬停在顶部的另一个游戏上然后返回“种子”，除非您再次悬停在“游泳池”上，否则无法选择它。无论溢出是什么，我都需要“Seeds”来随时选择。

select

https://jsfiddle.net/cblaze22/qp4L15tj/8/

游戏悬停的当前代码（蓝色矩形区域）

.forward在蓝色矩形区域上放置一个大的z索引。

Answer 1

一旦您理解了结构和实际问题，这实际上是一个非常简单的修复。 Div的覆盖div。首先，在

$(element).hover(
                function () {
                    if (!$(this).parent().hasClass('editing')) {
                        $(this).addClass('forward');
                    }
                },
                function() {
                    $(this).removeClass('forward');
                }
            );

中禁用所有点击事件，因为它们不需要。然后将点击事件添加回选择。为了使它更通用以便于再次使用，您可以简单地在CSS选择器中更改.bracket-part类select或其他东西。关于z-index的JS实际上并不需要。

.re-enable-events

见：

#bracket-wrapper .bracket-part select {
  pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
  pointer-events: none;
}

https://jsfiddle.net/uws8pf1y/具有非常好的兼容性，因此这个解决方案应该适用于所有设备。

Answer 2

直截了当：没有干净的CSS解决方案来解决您的问题。 由于您的所有元素几乎相同（例如，我的意思是Pointer events），您将找不到涵盖所有配置的解决方案。由于它们彼此没有差异，因此它们都具有相同的class但不具有相同的堆叠背景。除非您给父母一个不同的z-index或更改堆叠上下文，否则您将无法访问被阻止的元素。它还归结为您更改代码的限制。代码看起来像是由JS构建的，你只需将它复制到你的小提琴中供我们测试。

Attempt #1

尝试＃1只是将高z-index直接添加到相应的父母。 z-index已经尝试过这样做。然而，他试图给整个班级一个高@mmshr，当然你已经指出了，这当然不会有效。

但是，您可以尝试仅在z-index属性中为此元素提供高z-index元素。这取决于您更改代码的有限程度。你理论上可以使用JQuery，但你选择元素的方式（例如通过style）让我尝试使用相同的伪类的尝试＃2，并且只是一个CSS尝试，所以在这种情况下使用JS是无稽之谈。顺便说一句，如果你可以改变这样的代码，你可以删除你的小JQuery函数，在nth-child()上添加forward类。

Attempt #2

这种尝试工作正常，你不受改变代码的能力的限制，因为这几乎是一行CSS。正如在尝试＃1中已经说明的那样，您可以使用hover来选择此元素。但是，这对所有配置都无效。如果你要添加一个元素 （pseudo-class）在你被阻止的元素之前你必须每次都改变你的CSS。但如果不需要更改元素和配置（或者至少不是订单），这是一个有效的解决方案：

<div data-bind="template: { name: 'bracket-template', data: $data }">...</div>

在这种尝试中，您也可以（并且必须）删除您的小JQuery函数：

#bracket-wrapper > div > div:nth-child(8) > div > div {
  z-index: 2 !important;
}

删除整个事情。

Attempt #3

可能最干净和最好的尝试是使用

$('.bracket-part').hover(
  function() {
    debugger;
    $(this).addClass('forward');
  },
  function() {
    $(this).removeClass('forward');
  }
);

。堆叠上下文正确解释stacking context。但是给你一个简单的概述（here）：

每个框属于一个堆叠上下文。给定堆叠上下文中的每个定位框具有整数堆栈级别，这是其在z轴上相对于同一堆叠上下文中的其他堆栈级别的位置。具有更高堆栈级别的盒子总是在具有较低堆栈级别的盒子前面格式化。框可能具有负的堆栈级别。堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后到前堆叠。

最重要的是这部分，因为它适用于您的结构：

堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后到前堆叠。

如果您查看HTML树，可以找到以下内容：W3C

根据堆叠上下文，我们应该能够通过更改树中这些元素的顺序，在后台为元素提供更高的堆叠顺序，然后在前面为元素。

这只是一个猜测，但你可能有一个像存储数据的数组，一些JS文件构建一个锦标赛支架。如果你能以某种方式改变这两个元素的顺序（例如通过改变数组的顺序），你就不会使用CSS而不会使用任何额外的JQuery。

What if none of these work?

那么，我没有看到任何只需要CSS的解决方案。

我也考虑过可能的JS解决方案，但这是一个艰难的解决方案，我无法找到（简单）解决方案。让我解释一下这个问题：

由于你的落后于select元素，JQuery不会在div上识别它（例如），所以你必须再次使用伪类，我已经用CSS尝试了。 我还考虑过将hover添加到阻塞元素中，因为JQuery可以在悬停时识别它。但是这也会导致问题：阻挡元素现在位于后台，阻挡元素位于前面，您也可以单击它。问题是（前）阻挡元素现在落后于z-index。这也不是一个有效的解决方案，因为您必须再次使用伪类来定位此特定元素。

Conclusion

我会诚实地对你说：这个锦标赛树的设计和构造都很糟糕。容器外部不应存在重叠的元素或元素，当然也不能两者兼而有之。如果我的尝试都不合适，我看不到任何CSS或JS解决方案。至少不是一个简单的。您几乎没有提供有关如何构建锦标赛树的信息，但如果您这样做，情况可能会发生变化。 在这种状态下，我认为重建整个结构是唯一真正干净的解决方案。

编辑

Solution #1 by -1

#bracket-wrapper提供了一个很好的解决方案，它不关注z-index。相反，它使用@Deckerz。我试过这种方法却失败了，因为我忘记了一个重要的部分。它背后的逻辑很简单：

首先，在@Deckerz中禁用所有点击事件，因为它们不需要。然后将点击事件添加回选择。为了使它更通用以便于再次使用，您可以简单地在CSS选择器中更改pointer-events类.bracket-part或其他东西。关于z-index的JS实际上并不需要。

select

但是，这仍然是一种解决方法。我仍然建议重构您的代码和CSS。

Answer 3

如果你想要种子总是可以选择，为什么不总是给它的.re-enable-events父母一个高

#bracket-wrapper .bracket-part select {
   pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
   pointer-events: none;
}

？

现在，在bracket-part徘徊之后，z-index只是很高。虽然种子在技术上是z-index的孩子，但是它位于它之外，所以除非种子选择在bracket-part悬停后直接悬停，否则它将无法选择。

如果你将bracket-part添加到种子的bracket-part父样式，种子将始终是可选择的：

z-index: 10000;