代码之家 › 专栏 › 技术社区 › Mike Flynn

在CSS中溢出时用z-index将html元素放在前面

z-index css html

Mike Flynn · 技术社区 · 6 年前

我想让蓝色矩形容器有一个更大的 z-index 当鼠标悬停在 overflow 集装箱。

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

有没有一种方法可以用CSS来处理,或者我需要JQuery?

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

游戏悬停当前代码(蓝色矩形区域)

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

0 回复 | 直到 6 年前

Deckerz 6 年前

一旦您了解了结构和实际问题,这实际上是一个非常简单的解决方案。Div覆盖了Div,首先你禁用了所有的点击事件 .bracket-part 因为他们不需要。然后将click事件添加回selects。为了使它更通用,便于再次使用,您可以简单地进行更改 select 在CSS选择器中 .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 有一个非常好的兼容率,所以这个解决方案应该适用于几乎所有的设备。

Community CDub 5 年前

不干净 CSS解决问题的唯一方法。
class 例如)您不会找到一个涵盖所有配置的解决方案。因为它们彼此没有区别,所以它们都有相同的 z-index 但不同的堆叠环境。除非你给他们的父母一个不同的 z-指数 或者更改堆叠上下文,您将无法访问被阻止的元素。这也可以归结为更改代码的限制。代码看起来像是由JS构建的,你只是把它复制到你的小提琴上让我们来测试。

尝试1

尝试#1只是增加高 z-指数 直接交给相应的父母。
@mmshr 已经试过了。然而,他试图给全班同学一个高分当然,你已经指出了这是行不通的。

z-指数 its中的元素 style 属性。这可以归结为更改代码的限制。理论上可以使用JQuery来实现这一点,但是选择元素的方式(例如 nth-child() )把我带到 forward 上课 hover .

尝试2

尝试1 pseudo-class
<div data-bind="template: { name: 'bracket-template', data: $data }">...</div> 之前

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

如果这些都不管用呢?

我还考虑了一个可能的JS解决方案,但这是一个艰难的,我无法想出一个(简单的)解决方案。我来解释一下这个问题:

自从你 select div JQuery元素在上无法识别它
我还想增加一个属于 -1 #bracket-wrapper . 这也不是一个有效的解决方案,因为您必须再次使用伪类来针对此特定元素。

或
在这种情况下,我认为重建整个建筑是唯一真正干净的解决办法。

编辑

@Deckerz

提供了一个很好的解决方案,它不关注z索引。相反,它使用 pointer-events . 我试过这种方法,但失败了,因为我忘了一个重要的部分。背后的逻辑很简单:

首先,您将禁用内部所有内容上的所有单击事件 .bracket-part 因为他们不需要。然后将click事件添加回selects。为了使它更通用,便于再次使用,您可以简单地进行更改在CSS选择器中 .re-enable-events
#bracket-wrapper .bracket-part select {
   pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
   pointer-events: none;
}

然而,这仍然是一个解决办法。我仍然建议重新构造代码和CSS。

mmshr 6 年前

总是 bracket-part 家长a高 z-index

现在,那个 z-指数 只有在 支架部分 悬停。虽然种子严格来说是 ,它位于其外部,因此除非种子选择悬停之后 支架部分

如果你加上 z-index: 10000; 去播种' 父样式,种子始终是可选择的:

<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;">