问题标签 [stacking-context]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

7 问题
Newest
Active
Bountied
318
Unanswered
0 投票
0 回答
37 浏览

css - CSS堆叠上下文影响SVG不透明度？

我遇到了一个“Safari 上发生的问题”，这最终导致我在基于 Chromium 的浏览器、Firefox 和 Safari 的某些场景中发现了非常不同的行为，有 3 种不同的结果。但是我真的找不到任何关于规范的参考，说明它们中的任何一个是否有任何理由或哪种行为是正确的。

可以在这个片段上检查场景 - 代码不是很有趣，预览是。

SVG 是紫色半透明的，蓝色 div 就在 SVG 后面。当 SVG 是透明的并与其他 HTML 内容重叠时，它有时可以看到下面的内容，有时则不能。接下来是我的结论：

  • 在基于 Chromium 的浏览器上，透明度按预期工作 - 将颜色与背景元素混合，直到 SVG 放置在不同的堆叠上下文中，然后不透明度停止允许从其他堆叠上下文中看到元素的后面。
  • 在 Mac 版 Safari 上，它的工作方式似乎与 Chromium 类似，但可能有问题？在相同的堆叠上下文中，透明度有效。如果您使用某些属性（如透明度停止）将 SVG 移动到新的堆叠上下文中filter，但其他属性不会停止透明度（例如transform.
  • 在 Firefox 上，透明度根本不起作用，透明 SVG 后面的元素通过它是不可见的，即使在相同的堆叠上下文中也是如此。

关于规格说明这一点的任何想法？

先感谢您。

0 投票
0 回答
9 浏览

highcharts - Highchart 数据系列列总计但空间

请帮我 ...

在此处输入图像描述

我的 JSON 数据：{“name”：“PAKET BRIGHTY UNDERARM GLOWING”，“id”：“PAKET BRIGHTY UNDERARM GLOWING”，“dataLabels”：{“enabled”：false }，“data”：[[“BRIGHTY GLOWING UNDERARM（ PO100RB)", 570 ], [ "5 BRIGHTY UNDERARM GLOWING (BR9)", 114 ], [ "BRIGHTY GLOWING UNDERARM (PO100RB)", 228 ], [ "3 BRIGHTY UNDERARM GLOWING (BR9)", 76 ], [ " BRIGHTY GLOWING UNDERARM (PO100RB)", 1040 ], [《20 BRIGHTY UNDERARM GLOWING (BR9)", 52 ], [ "BRIGHTY GLOWING UNDERARM (PO100RB)", 1368 ], [ "2 BRIGHTY UNDERARM GLOWING (BR9)", 684 ]、[“腋下发光（PO100RB）”、360 ]、[“15 腋下发光（BR9）”、24 ]、[“腋下发光（PO100RB）”、120 ]、[“12 明亮的腋下发光 (BR9)", 10], ["明亮的腋下发光 (PO100RB)", 1020], ["10 明亮的腋下发光 (BR9)", 102]] }

0 投票
2 回答
115 浏览

html - 悬停效果不适用于 z-index 较低的元素

我的 z-index 有问题。我在这个 jsfiddle 中模拟了我的问题。我在一个容器中有两个兄弟姐妹 div。其中一个用作容器的背景并对其元素具有悬停效果，因此当您将鼠标悬停在其元素上时，元素的颜色会发生变化。将它放在第二个 div 后面，我使用了负 z-index ，但悬停效果对其不起作用。这个问题的任何解决方案？我看到了一些关于这个主题的问题，但没有任何有效的答案......

提前致谢。

0 投票
1 回答
89 浏览

html - CSS。具有比例的动画最终会破坏堆叠上下文

基本上。我有一个固定 z-index 的网站：2；导航栏。它工作得很好，但我也有一个图像在悬停时缩放 1.2。问题就出现在这里。无论我做什么，图像都会出现在我的导航栏顶部。

注意：我的 .about-me-logo:hover 不在代码中，因为我废弃了它。我在这个问题上花了 1 个小时，并在多个论坛上提出了这个问题，最终我放弃了它。我希望仍然在这里得到答案，然后将其放回我的代码中。

编辑：HTML

带有 JSFiddle 的片段（在这个小窗口中效果不佳，但它显示了问题。https: //jsfiddle.net/Epicurious_/ufmw53hq/2/

视频显示出了什么问题： https ://kapwi.ng/c/epi7dEgH2u

0 投票
1 回答
35 浏览

css - CSS：彭罗斯楼梯堆叠效果

我想做一个类似于彭罗斯楼梯的效果，你element-1在上面element-2但在element-3女巫后面，据element-2我所知有点复杂。

我有这个代码

代码有两个元素都可以before到达另一个元素，这是我的问题的简化版本，但我想要before两个元素的背后。

我还需要考虑其他一些限制，这应该是响应式的，所以我不能轻易摆脱设定的宽度。另外，我试图让它尽可能地保持原样。

编辑1：

我想达到这个 效果

0 投票
1 回答
36 浏览

html - `will-change: opacity` 不会创建新的堆叠上下文

在MDN web docs 中提到堆叠上下文是在这些场景中形成的：

  1. 不透明度值小于 1 的元素
  2. will-change具有指定将在非初始值上创建堆叠上下文的任何属性的值的元素

但是当我设置will-change为opacity（小于 1 的非初始值）时，堆叠无法按预期工作（蓝色 div 低于红色 1），请参阅此小提琴

其他一些场景按预期工作；蓝色 div 高于红色一个（链接到小提琴）

  1. 具有绝对或相对位置值且 z-index 值不是 auto 的元素
  2. 作为网格容器的子元素的元素，其 z-index 值不是 auto

我做错了什么，有没有其他方法可以使堆叠上下文按预期工作

我问是因为有时我无法将位置更改为相对，因为这会影响该元素的绝对子元素

0 投票
1 回答
47 浏览

css - 如何处理堆叠上下文问题

我正在审查堆栈上下文概念，对以下示例感到困惑 在父 div 中，我们创建了一个新的堆栈上下文，我不明白为什么父 div 上方的子堆栈，我也使用此图像作为参考堆叠顺序。


12345678910