CSS溢出时将HTML元素置于z-index的前面

Question

当悬停在[Test] public void Test() { try { ServiceLocator.Reset(); Assert.IsTrue(AddService<IA>(new TestA(), false)); Assert.IsTrue(AddService<IB>(new TestB(), false)); // TestAB implements IA and IB so replacing should fail; Assert.IsTrue(AddOrReplaceService<IB>(new TestAB(), true)); 容器的元素上时，我试图使蓝色矩形容器的z-index比其他盒子大。

第3场游戏的z-index较大，但是我想在下面的蓝色圆圈中访问overflow Loser，但是除非我将鼠标悬停在蓝色矩形上，获得关注。

是否可以通过CSS解决该问题？还是需要JQuery？

我创建了一个Fiddle，它可以复制此内容，因此可以忽略任何JS错误，因为实际页面需要包含很多内容，但是问题仍然存在。将鼠标悬停在第四项游戏上，该游戏具有三个下拉菜单：源，池，种子。您可以选择种子就好了。但是，将鼠标悬停在顶部的另一个游戏上，然后回到“种子”，除非再次将鼠标悬停在“游泳池”上，否则无法选择它。无论溢出是什么，我都需要始终选择“种子”。

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

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

.forward在蓝色矩形区域上放置了一个较大的zindex。

select

Answer 1

一旦您了解了结构和实际问题，这实际上是一个非常容易的修复。 Div的div覆盖。首先，您不需要.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;
}

请参阅：https://jsfiddle.net/uws8pf1y/

Pointer events具有很好的兼容性，因此该解决方案在几乎所有设备上都可以使用。

Answer 2

直截了当地：没有不干净的CSS解决方案可以解决您的问题。
由于您所有的元素几乎都是相同的（例如，我的意思是class），因此您将找不到涵盖所有配置的解决方案。由于它们彼此之间没有区别，因此它们都具有相同的z-index，但是堆叠上下文不同。除非您给他们的父母一个不同的z-index或更改堆栈上下文，否则您将无法访问被阻止的元素。这还取决于更改代码的限制。该代码看起来像是由JS构建的，您只是将其复制到您的小提琴中，以便我们进行测试。

尝试＃1

尝试1号只是将高z-index直接添加到相应的父级。
@mmshr已尝试执行此操作。但是，他试图给全班同学一个高z-index，但正如您已经指出的那样，这不会奏效。

不过，您可以尝试在其z-index属性中仅给此元素一个高style元素。这取决于更改代码的局限性。从理论上讲，您可以使用JQuery，但是您选择元素的方式（例如，通过nth-child()）使我进入 Attempt＃2 ，它使用相同的伪类并且仅用于CSS尝试，因此在这种情况下使用JS毫无意义。顺便说一句，如果您可以像这样更改代码，则可以删除在forward上添加hover类的小JQuery函数。

尝试＃2

这种尝试效果很好，并且您不受更改代码能力的限制，因为这几乎是一行CSS。如尝试＃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树，则会发现以下内容：

根据堆叠上下文，我们应该能够通过更改树中这些元素的顺序，使背景中的元素的堆叠顺序比前面的元素高。

这只是一个猜测，但是您可能有一个类似数组的地方，用于存储数据，并且一些JS文件在其中建立了锦标赛括号。如果您能够以某种方式更改这两个元素的顺序（例如，通过更改数组的顺序），则将不使用CSS，也不会使用任何其他JQuery。

如果这些都不起作用怎么办？

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

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

由于您的select位于div元素后面，因此JQuery无法识别（例如）hover上的元素，因此您将不得不再次使用伪类，而我已经在CSS中进行了介绍。 -仅尝试。
我还考虑过将z-index中的-1添加到阻塞元素，因为JQuery可以在悬停时识别它。但这也带来了问题：阻塞元素现在在后台，阻塞元素在前面，您也可以单击它。问题在于，（前）阻止元素现在位于#bracket-wrapper之后。这也不是有效的解决方案，因为您将不得不再次使用伪类来定位此特定元素。

结论

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

编辑

@Deckerz的解决方案＃1

@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。

Answer 3

如果您希望种子总是 可选，为什么不总是给bracket-part的父母高z-index呢？

现在，z-index仅在bracket-part悬停之后才高。尽管从技术上讲，种子是bracket-part的子元素，但是它位于其外面，因此，除非将bracket-part悬停在种子选择上直接将它们悬停 ，否则它将不会可选。

如果将z-index: 10000;添加到Seeds的bracket-part父样式中，种子将始终是可选的：

<div class="part bracket-part ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" data-bind="bracketPartInit: { left: $data.left, top: $data.top, height: $data.height, width: $data.width, disabled: $root.members.bracket.disableDrag, minHeight: $data.minHeight }, css: { 'dash-top' : $data.dashedBorderTop(), 'dash-right' : $data.dashedBorderRight(), 'dash-bottom' : $data.dashedBorderBottom(), 'dash-left' : $data.dashedBorderLeft(), 'reverse-bracket' : $data.type() == 2, 'box-bracket': $data.type() == 13, 'bye': $data.bye()}" aria-disabled="true" style="top: 459px; left: 0px; height: 80px; width: 150px; z-index: 10000;">