在浏览器中,什么具有更大的优先级:不透明度或z索引?

这不是一个bug,实际上 它应该如何工作 . 这有点让人困惑 elaborate description of Stacking Contexts 什么都没提。然而, visual formatting module 链接到 color module 这个特别的到哪去了 可以 被发现(强调我的):

因为不透明度小于1的元素是由单个 屏幕外图像,其外部内容不能按Z顺序分层 在其中的内容片段之间。出于同样的原因, 实现必须为任何元素创建新的堆栈上下文 不透明度小于1。 如果不透明度小于1的元素是 没有定位,实现必须绘制它创建的层, 在其父堆栈上下文中,以与 如果它是一个位置元素,并且具有_z-index:0_ _不透明度:1_ 如果放置不透明度小于1的元素, __Z-index__属性适用于[css21]中的描述,但 __auto_稊被视为__0_,因为新的堆栈上下文总是 创建。更多信息见[CSS21]第9.9节和附录E。 有关堆叠上下文的信息。本段中的规则没有 应用于SVG元素,因为SVG有自己的渲染模型([SVG11], 第3章)。

这不是问题 opacity 比…更重要 z-index 而不是 Z指数 相对于它们的叠加上下文(请参见 z-index 在CSS2规范中)。

换言之, Z指数 仅在定位祖先的上下文中有意义(无论是相对的、绝对的还是固定的)。您需要做的是添加一个 position: relative; 到同时包含弹出窗口和海军广场的元素,并可能添加一个 z-index: 1; . 看到您的屏幕截图,它可能是一个顶级元素,如wrapperDIV。

针对两个元素(如divs)的变通方法:添加 0.99 不透明度到您的顶部元素,并重新建立两者的顺序。

opacity: 0.99;

调试此问题可能需要示例代码。

你可以把 overflow: hidden 而且可能 position: relative 在一个 DIV 它包围了所有编辑器对象,试图强制元素只在其中绘制 div ,例如:

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

最后,你也可以尝试 iframe 在这两种元素之间试图阻止它们渗入。

您可以尝试使用如下方法设置弹出窗口的DIV !important 因此,在应用新样式或类时,样式不会发生更改:

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

然后,生成新的CSS类:

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

并向窗口中的所有元素添加类,例如:

<input value="posx" class="some_class PopupElement"/>

我想这是可行的,因为在应用CSS属性时没有优先级…据我所知。=)

虽然@guillaume-esquevin已经给出了一个很好的答案,但是我会尝试扩展它,以防有人忽略什么是堆叠上下文(就像我做的那样)。

正如你所能看到的 here ,这里有一个称为堆栈上下文的东西,它指的是共享一个在堆栈中一起移动的父元素的一组元素。例如,一个DIV及其所有子级。

创建堆叠上下文有三种方法:在文档的根(HTML元素)、定位父元素以及将父元素的不透明度更改为低于1的值。

然后,如果有一个不透明度小于1的DIV,并且希望该DIV的某些同级元素出现在它的后面(及其子元素),则可以通过将其位置设置为相对或更改其不透明度在该同级上创建新的堆叠上下文。

我也有同样的问题。使用rgba而不是颜色/不透明度解决了我的问题。使用less(在引导框架中),fade()函数为我进行了转换。